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-responsive＆amp; img标签中的中心块

一旦它们中断（例如在md屏幕宽度上），没有任何内容！我尝试过使用center-block并用float编写自己的：none＆amp; amp; 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类，而不是像{I>那样通过col-*-*类来定位DIV。

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

Answer 2

Bootstrap非常适合构建响应式网站。这是一个解决方案，将图像集中在流体容器div中，同时显示lg设备上的3列布局。 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- *）

3 个答案: