我正在引导中显示一个包含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

09-10 10:21
查看更多