0

基于来自 Bootstrap网站的示例代码片段，我构建了以下代码以显示两个水平对齐的缩略图：

<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>

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

在此处输入图像描述

如何使缩略图水平对齐，如此处的代码示例所示？

4

5 回答 5

1

Your problem is in col-sm-6, col-md-3, col-lg-3 classes. Try to remove <div class="col-sm-6, col-md-3, col-lg-3">. It should work.

POST EDIT: I forgot about .thumbnail: { display:inline; ...}

于 2013-09-04T14:21:55.530 回答
1 
.row{text-align: center;}
.thumbnail{
    display: inline-block;
    text-align: left;
}
于 2013-09-04T14:22:32.233 回答
1

你需要做的就是在你的 CSS 中添加这个：

.thumbnail {
    float: left;
}
于 2013-09-04T13:43:50.293 回答
1

或者您可以将 inline-block 用于缩略图显示属性，这将避免使用浮点数时文档流中潜在的清除问题：

.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>

这样做你不需要使用任何自定义样式，它是引导行为。

于 2013-09-04T13:51:35.367 回答
0

一定要像jsFiddle那样浮动。使用, , .<div>float: left;clear: none;position: relative;

于 2013-09-04T13:46:14.880 回答