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>

会发生以下情况： picture

由于

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

你可以使用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>

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。然而，在移动设备上这将尝试尝试

Answer 4

我认为这是bootstrap

col-没有后缀用于最小屏幕，我假设移动设备使用此范围。

你每行有12个cols，你现在插入1 + 5 + 5 + 5，这就是它看起来错误的原因。您应该插入剩余的cols，因此你有12个。（col-现在总共24个cols，这很好，因为你在移动设备上制作了2行12个）

<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-1 col-sm-1"></div>
    <div class="col-1 col-sm-1"></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 class="col-1 col-sm-1"></div>
  </div>
 </div>

或者偏移也会像其他答案所说的那样起作用。取决于你想要的东西。

Answer 5

你可以这样做

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

网格系统无法在移动设备上运行

5 个答案: