html - 移动设备上的 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”类。如果我删除 col-lg-6 它就可以正常工作。但我希望能够将两个图像并排堆叠。有没有办法纠正这个问题，使它像第一张图片一样居中？ JSFiddle 包含三个图像。

这是全屏时的样子。

Answer 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