移动设备上的引导程序网格布局

问题描述：

我正在尝试使用不同的图像创建引导程序网格布局。除了在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?2017" 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中心块文本中心”类。如果我删除col-lg-6，它工作得很好。但我希望能够将两个图像堆叠在一起。有什么方法可以纠正这个问题，使它像第一个图像一样居中？ JSFiddle包含三个图像。

这是它在全屏看起来像。

答

由于力的宽度和高度设置，图像不是正确的宽高比。也许只需设置最大高度，以便它们的图像宽度可以作出响应性更改。

此外，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?2017" 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

这的确行得通，但是我希望尽可能保持图像的大小相同。 – Dexstrum

第一张图像比其他图像大，因为它不限于列大小。 – Dexstrum

你仍然可以在img上设置宽度/高度，它们只是不成比例。居中问题是由于图像上没有“中心块”。 – ZimSystem

答

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

....

使用此代码在您的DIV正如我上面提到你在哪里放置您的网格，和DIV这些类。它的工作原理

这并不解决问题。它在检查员中仍然偏离中心。我正在做。 – Dexstrum

正如我所说的在div中使用此不在该部分。然后你会看到你的问题将得到解决 – UmarJamil

这有助于但它迫使所有的图像太靠右，而不是集中它们。 – Dexstrum

答

使用只需在移动设备上添加媒体查询时。

这将是这个样子：

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

Fiddle

移动设备上的引导程序网格布局

相关推荐