网格系统不能在移动环境下工作

Question

因此，我试图将这4幅图像放在两行(仅在手机上)上，每一行两张。在桌面上，它们只在一行中居中。

我不可能在不破坏桌面视图的情况下，使最后两个以移动为中心。

，这就是我所拥有的：

<div class="col-12 col-sm-12">
  <div class="row">
    <div class="col-1 col-sm-1"></div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about1.jpg">
    </div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about2.jpg">
    </div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about3.jpg">
    </div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about4.jpg">
    </div>                  
  </div>
</div>

这就是发生的事情： 图片

谢谢

Answer 1

而不是<div class="col-1 col-sm-1"></div>，您可以使用offset-1作为更优雅的解决方案。

请查看以下代码：

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div class="container">
    <div class="row">
        <div class="col-5 col-sm-2 offset-1 offset-sm-2 aboutMid aboutMid1">
           <p>first</p>
            <img src="assets/about/about1.jpg">
        </div>
        <div class="col-5 col-sm-2 aboutMid aboutMid1">
            <p>second</p>
            <img src="assets/about/about2.jpg">
        </div>
        <div class="col-5 col-sm-2 offset-1 offset-sm-0 aboutMid aboutMid1">
            <p>third</p>
            <img src="assets/about/about3.jpg">
        </div>
        <div class="col-5 col-sm-2 aboutMid aboutMid1">
            <p>fourth</p>
            <img src="assets/about/about4.jpg">
        </div>
    </div>
</div>

​

Answer 2

你可以用保证金用途来像这样.

https://www.codeply.com/go/sA5gd0e2Zp

    <div class="col-12 col-sm-12">
        <div class="row">
            <div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
                <img src="//placehold.it/400" class="img-fluid">
            </div>
            <div class="col-5 col-sm-2 mr-auto mr-sm-0 aboutMid aboutMid1">
                <img src="//placehold.it/400" class="img-fluid">
            </div>
            <div class="col-5 col-sm-2 ml-auto ml-sm-0 aboutMid aboutMid1">
                <img src="//placehold.it/400" class="img-fluid">
            </div>
            <div class="col-5 col-sm-2 mr-auto mrnone aboutMid aboutMid1">
                <img src="//placehold.it/400" class="img-fluid">
            </div>
        </div>
    </div>

Answer 3

尝尝这个

<div class="col-12 col-sm-12">
    <div class="row">
        <div class="col-5 offset-1 col-sm-2 aboutMid aboutMid1">
            <img src="assets/about/about1.jpg">
        </div>
        <div class="col-5 col-sm-2 aboutMid aboutMid1">
            <img src="assets/about/about2.jpg">
        </div>
        <div class="col-5 offset-1 col-sm-2 aboutMid aboutMid1">
            <img src="assets/about/about3.jpg">
        </div>
        <div class="col-5 col-sm-2 aboutMid aboutMid1">
            <img src="assets/about/about4.jpg">
        </div>
    </div>
</div>

您所缺少的是底部行上的第二个缩进。您需要在大屏幕上通过添加该视图大小的媒体查询来修复此问题。例如：col-lg-5和offset-lg-1可能。不过，在手机上，这是可行的，试试吧。