【问题标题】:Centre 2 images under 3 images with Bootstrap使用 Bootstrap 在 3 个图像下居中 2 个图像
【发布时间】:2014-07-07 15:21:50
【问题描述】:

My Site

在此网站的“正在阅读...”部分下有 5 张图片。顶行的 3 个是下面的 2 个。我对使用 col-lg-4 的 3 张图片的方式感到满意

但我希望底部的两张图片位于下方居中,如下所示:

           □       □       □
               □       □   

在应用span6 后,我尝试在底部两个图像上使用边距,但这会影响浏览器调整大小时的响应定位。

如何在不影响响应性的情况下让底部的两张图片整齐地居中?

非常感谢。

【问题讨论】:

    标签: html twitter-bootstrap responsive-design twitter-bootstrap-3


    【解决方案1】:

    这是可能的,同时使用 col-sm-xcol-sm-offset-x

    <div class="container">
      <div class="col-sm-4">
        <img src="http://placehold.it/110x150/2ecc71/fff" class="center-block">
      </div>
      <div class="col-sm-4">
        <img src="http://placehold.it/110x150/3498db/fff" class="center-block">
      </div>
      <div class="col-sm-4">
        <img src="http://placehold.it/110x150/e74c3c/fff" class="center-block">
      </div>
      <div class="col-sm-4 col-sm-offset-2">
        <img src="http://placehold.it/110x150/e67e22/fff" class="center-block">
      </div>
      <div class="col-sm-4">
        <img src="http://placehold.it/110x150/9b59b6/fff" class="center-block">
      </div>
    </div>
    

    Bootply

    【讨论】:

    • 太棒了。工作完美。您是如何学习 col-sm-4 的,了解 Bootstrap 网格/类的最佳资源是什么?我在他们的网格参考网站上找不到 col-sm-4。
    • @Danelian 对于 2 个图像行,为什么不使用 col-sm-6?
    猜你喜欢
    • 2014-06-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-06
    • 1970-01-01
    • 1970-01-01
    • 2017-07-19
    • 1970-01-01
    • 2013-10-13
    相关资源
    最近更新 更多