Bootstrap 列和响应问题（每个元素有多个 col-*）

Question

我有 3 张图片，我希望它们始终完美居中 div，但根据屏幕宽度表现不同。例如：在 lg 上显示 3 横跨，md 将是下方的 2 和 1，sm 将是所有 3 个垂直堆叠。

我正在尝试通过使用 Bootstrap 的网格系统来完成此操作，但遇到了很多问题，很高兴听到如何使用 Bootstrap 或任何替代解决方案进行修复。

<section class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4"><img src="image1.png" /></div>
        <div class="col-sm-12 col-md-6 col-lg-4"><img src="image2.png" /></div>
        <div class="col-sm-12 col-md-12 col-lg-4"><img src="image3.png" /></div>
    </div>
</section>

我的问题如下：

更新通过在 img 标签中放置 img-responsive 和 center-block 解决了这两个问题

一旦它们中断（例如在 md 屏幕宽度上），什么都不会居中！我尝试使用 center-block 并使用 float:none & margin: 0 auto 编写自己的代码，但我得到了相同的行为。我也尝试过将每个选项都放在父级 div 中，但这些选项中的任何一个都无济于事。
最左边的图片总是有一些左边距，导致它们永远不会完全居中

Answer 1

如果您只想在那些 col-*-* DIV 中放置图像，请使用 text-align: center;;

HTML

<section class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4"><img src="http://lorempixel.com/300/300/city/" /></div>
        <div class="col-sm-12 col-md-6 col-lg-4"><img src="http://lorempixel.com/300/300/city/" /></div>
        <div class="col-sm-12 col-md-12 col-lg-4"><img src="http://lorempixel.com/300/300/city/" /></div>
    </div>
</section>

CSS

div[class^="col-"] {
    text-align: center;
}

您可能想要添加自己的 CSS class，而不是像我一样通过 col-*-* class 来定位 DIV。

jsFiddle: http://jsfiddle.net/Lactpch8/

Answer 2

Bootstrap 非常适合构建响应式网站。这是一个解决方案，它将在流体容器中居中图像 div，同时在 lg 设备上显示 3 col 布局 & md 在下方显示 2 和 1，sm 将全部 3 个垂直堆叠。

http://www.bootply.com/WEoEQo5a5f

/* CSS used here will be applied after bootstrap.css */
.thumbnail {
    border:none;
  }

<div class="container-fluid">

    <div class="row">

        <div class="col-sm-6 col-md-4">
            <div class="thumbnail"><img src="http://placehold.it/150x150"></div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail"><img src="http://placehold.it/150x150"></div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail"><img src="http://placehold.it/150x150"></div>
        </div>

    </div>
</div>

Answer 3

这是上述解决方案的修改版本，仅使用 Bootstrap 类来创建可根据您的需要在各种设备上完美运行的 3 响应图像。 http://jsfiddle.net/Lactpch8/1/

<div class="container-fluid">
<div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
        <div class="text-center">
            <img src="http://lorempixel.com/320/240/sports/2/" class="img-thumbnail text-hide" />
        </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
        <div class="text-center">
            <img src="http://lorempixel.com/320/240/sports/" class="img-thumbnail text-hide" />
        </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
        <div class="text-center">
            <img src="http://lorempixel.com/320/240/sports/1/" class="img-thumbnail text-hide" />
        </div>
    </div>
</div>

Bootstrap 列和响应问题（每个元素有多个 col-*）

Bootstrap column and responsive issues (with multiple col-* per element)

html

css

twitter-bootstrap

twitter-bootstrap-3