Bootstrap 移动设备上的网格布局

Question

我正在尝试使用不同的图像创建 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" class。如果我删除 col-lg-6 它就可以正常工作。但我希望能够将两个图像并排堆叠。有没有办法纠正这个问题，使它像第一张图片一样居中？ JSFiddle 包含三个图像。

这是全屏时的样子。

Answer 1

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

....

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

Answer 2

由于设置了强制宽度和高度，图像的纵横比不正确。也许只是设置一个最大高度，这样他们的图像宽度就可以响应地改变。

此外，应该在图像上使用 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

Answer 3

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

看起来像这样：

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

Fiddle

Bootstrap 移动设备上的网格布局

Bootstrap Grid Layout on Mobile Devices

html

css

mobile

twitter-bootstrap

responsive-images