html - 网格系统不适用于移动设备

Question

因此，我试图将这 4 张图像放在两行(仅限移动设备)上，每行两张。在桌面上，它们仅在一行中居中。

我无法在不弄乱桌面 View 的情况下让底部的两个以移动设备为中心。

这是我的:

<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>

这是发生了什么: picture

谢谢

Answer 1

您可以使用 margin utils像这样居中...

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>