我正在引导中显示一个包含3行的信息块。我正在使用bootstrap cols使这些响应。对于较小的屏幕,我使用col-sm-4;对于较大的屏幕,我使用col-lg-3,以使图像合适。
<div class="container clearfix row" style="
width: 100%;
display: table;
margin: 0 auto;">
<!-- post list -->
<div class="test col-sm-4 col-md-4 col-lg-3" style="
display: table-cell;
margin: 0 auto;">
<figure>
<img alt="" src="assets/icons/find-awesome-stories.png">
<figcaption>
<span>
test3
</span>
</figcaption>
<!-- / post item wide -->
</figure>
</div>
<div class="test col-sm-4 col-md-4 col-lg-3" style=" display: table-cell; margin: 0 auto;">
<figure>
<img alt="" src="assets/icons/make-them-yours.png">
<figcaption>
<span>
test 1
</span>
</figcaption>
</figure>
</div>
<div class="test col-sm-4 col-md-4 col-lg-3" style="
display: table-cell;
margin: 0 auto;">
<figure>
<img alt="" src="assets/icons/show-it-off.png">
<figcaption>
test2
</figcaption>
</figure>
</div>
<div class="clear"></div>
</div>
现在,我面临的挑战是我无法集中这些元素。我尝试使用
margin: 0 auto
,使它们成为table-table-cell
,甚至尝试了inline-block
技巧。但是似乎没有任何作用。您能帮我谢谢吗?这是小提琴http://jsfiddle.net/WJ3U9/2/的链接
最佳答案
第一
改变你的 :
<div class="container clearfix row" style=" width: 100%; margin: 0 auto;">
至
<div class="container">
因为您的标记首先是错误的。然后,
将此添加到您的标记CSS .....(只是检查了宽屏,而不是小屏幕)
.test {
border:1px solid #000;
margin: 0 auto;
overflow:hidden;
}
figure > img {
width:100%; /* make image fit inside div*/
height:auto;
}
demo here