水平对齐缩略图

Question

根据Bootstrap website中的示例代码段，我构建了以下代码，以显示水平对齐的两个缩略图：

<div class="row">
  <div class="col-sm-6 col-md-3 col-lg-3">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Filter mode</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Filter mode</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
  </div>
</div>

但是，它们不是水平对齐，而是垂直堆叠，如下所示：

如何将缩略图水平对齐，如代码示例here？

所示

Answer 1

您需要做的就是在CSS中添加：

.thumbnail {
    float: left;
}

Answer 2

或者您可以使用内联块来显示缩略图显示属性，这样可以避免在使用浮点数时文档流中可能出现的清除问题：

.thumbnail {
    display: inline-block;
}

twitter bootstrap中使用的示例是使用列，因此将多个拇指放入一列将导致它们堆叠。尝试添加到不同的列中以获得与示例相同的效果，如下所示：

<div class="col-sm-6 col-md-3 col-lg-3">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Filter mode</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
   <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Filter mode</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
   </div>
</div>

执行此操作时，您不需要使用任何自定义样式，它是预期的引导行为。

Answer 3

您的问题出在col-sm-6, col-md-3, col-lg-3课程中。尝试删除<div class="col-sm-6, col-md-3, col-lg-3">。它应该工作。

POST EDIT：我忘记了.thumbnail: { display:inline; ...}

Answer 4

.row{text-align: center;}
.thumbnail{
    display: inline-block;
    text-align: left;
}

Answer 5

确保{strong>漂浮 <div>，如jsFiddle。使用float: left;，clear: none;，position: relative;。