简单的 Bootstrap 3 缩略图库答案

【问题标题】：Simple Bootstrap 3 Thumbnail Gallery简单的 Bootstrap 3 缩略图库
【发布时间】：2013-11-18 22:56:44
【问题描述】：

我正在尝试制作一个带有文本的简单缩略图库。我希望将图像放在 6 列中，将文本放在另外 6 列中，以便图像位于文本的左侧但在同一行中。我想不通。

我的问题是图像被列在彼此下方，而不是像普通画廊一样放置。出了什么问题？

这是我的代码

<div class="section">
    <div class="row">
      <div class="col-md-6">
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
      </div>

    <article class="col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.</p>


    </article>

  </div>
</div>![bootstrap gallery][1]

【问题讨论】：

标签： twitter-bootstrap gallery twitter-bootstrap-3

【解决方案1】：

我想你想要这样的东西来保持图像在同一行..

<div class="row">
      <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
      <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
      <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
      <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
      <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
      <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
      <article class="col-md-6">
      ..
      </article>
    </div>

http://bootply.com/94880

【讨论】：

这是一个正确的答案，但有点奇怪，因为 'thumbnail' 类除了添加边框之外什么都不做……'thumbnail' 的整个概念似乎是多余的。