移动设备上的引导网格布局答案

【问题标题】：Bootstrap Grid Layout on Mobile Devices移动设备上的引导网格布局
【发布时间】：2017-03-08 11:27:02
【问题描述】：

我正在尝试使用不同的图像创建 Bootstrap 网格布局。一切都很好，除了在 Chrome 上的移动检查器中在不同的移动设备上查看时。下面是它在检查器中的样子的图片。第二张图片与前一张图片略微偏离中心。

<section class="container" id="main">
<section class="center-block text-center">
    <h4>Random Column Number 1</h4>
    <img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201701231950" width="500px" height="262px"/>
</section>
<section class="col-lg-6 center-block text-center">
    <h4>Random Column Number 2</h4>
    <img src="http://www.appliste.cz/wp-content/uploads/2016/05/Apple_1998.png" width="500px" height="262px" />
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 3</h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/931px-Apple_Computer_Logo_rainbow.svg.png" width="500px" height="262px" />
  </section>
</section>

这里是JSFiddle。问题是我试图将第二部分偏移为“col-lg-6 center-block text-center”类。如果我删除 col-lg-6 它工作得很好。但我希望能够将两个图像彼此相邻堆叠。有没有办法纠正这个问题，使它像第一张图片一样居中？ JSFiddle 包含三个图像。

这是全屏时的样子。

【问题讨论】：

标签： html css twitter-bootstrap mobile responsive-images

【解决方案1】：

由于设置了强制宽度和高度，图像的宽高比不正确。也许只需设置一个最大高度，以便它们的图像宽度可以响应变化。

另外，应在图像上使用center-block 而不是col-

<section class="container" id="main">
  <section class="center-block text-center">
    <h4>Random Column Number 1</h4>
    <img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201701231950" class="center-block img-responsive" />
  </section>
  <section class="col-lg-6 text-center">
    <h4>Random Column Number 2</h4>
    <img src="http://www.appliste.cz/wp-content/uploads/2016/05/Apple_1998.png" class="center-block img-responsive" />
  </section>
  <section class="col-lg-6 center-block text-center">
    <h4>Random Column Number 3</h4>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/931px-Apple_Computer_Logo_rainbow.svg.png" class="center-block img-responsive" />
  </section>
</section>

http://www.codeply.com/go/JBhTWnvfv5

【讨论】：

这确实有效，是的，但我希望尽可能保持图像大小相同。
第一个图像比其他图像大，因为它不受列大小的限制。
您仍然可以在 img 上设置宽度/高度，它们只会不成比例。居中问题是由于center-block 不在图像上。
删除图像响应标签会将其重置回原来的样子。我留下了center-block 标签。
col-lg-6 center-block 标签是导致问题的原因，但我想保留它以用于全屏布局。

【解决方案2】：

只需在移动设备上添加媒体查询即可。

看起来像这样：

 @media screen and (max-width: 720px) {
   .center-block {
        padding:0 !important;
   }
 }

Fiddle

【讨论】：

【解决方案3】：

<div class="col-sm-3">....</div>

……

在您放置网格的 div 中使用此代码，并在上面提到的这些类中使用 div。有效

【讨论】：

这并不能解决问题。它仍然在检查器中偏离中心。我在做 .
正如我所说，在 div 中使用它而不是在该部分中。然后你会看到你的问题会得到解决
这有帮助，但它会迫使所有图像向右太远而不是居中。
创建另一个空白的 div 将这个 div 添加到该 div 并在父 div 中添加 class="center"。你会摆脱这个问题。
应该是这样的吗？
...