根据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?
所示答案 0 :(得分:1)
您需要做的就是在CSS中添加:
.thumbnail {
float: left;
}
答案 1 :(得分:1)
或者您可以使用内联块来显示缩略图显示属性,这样可以避免在使用浮点数时文档流中可能出现的清除问题:
.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>
执行此操作时,您不需要使用任何自定义样式,它是预期的引导行为。
答案 2 :(得分:1)
您的问题出在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; ...}
答案 3 :(得分:1)
.row{text-align: center;}
.thumbnail{
display: inline-block;
text-align: left;
}
答案 4 :(得分:0)
确保{strong>漂浮 <div>
,如jsFiddle。使用float: left;
,clear: none;
,position: relative;
。