Bootstrap 4 行布局没有响应答案

【问题标题】：Bootstrap 4 row layout is not responsiveBootstrap 4 行布局没有响应
【发布时间】：2019-07-10 23:59:03
【问题描述】：

我正在 MEAN 堆栈上使用 Bootstrap 4 为新闻文章布局创建一个 html 模板，但这没关系...

要求是针对此总体布局，在自己的列中包含一篇“精选”文章，在另一列中的两行中包含 8 篇其他文章。在较小的屏幕或移动设备上查看时，其他文章应根据需要折叠在第一个和彼此的下面：

桌面：

-----------------------------------------------------------------
                 | Article 1 | Article 2 | Article 3 | Article 4 |
Article 0        |                                               |
                 | Article 5 | Article 6 | Article 7 | Article 8 |
-----------------------------------------------------------------

手机：

-----------------
Article 0
-----------------
Article 1
-----------------
Article 2
-----------------
.
.

这是我用来实现布局的：

  <div>
    <div class="row">
      <div class="col-4">
        <div>
          Article 0
        </div>
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col-3">
            Article 1
          </div>
          <div class="col-3">
            Article 2
          </div>
          <div class="col-3">
            Article 3
          </div>
          <div class="col-3">
            Article 4
          </div>
          <div class="col-3">
            Article 5
          </div>
          <div class="col-3">
            Article 6
          </div>
          <div class="col-3">
            Article 7
          </div>
          <div class="col-3">
            Article 8
          </div>
        </div>
      </div>
    </div>
  </div>

这在台式机上效果很好，但在移动设备上，每个元素都挤在一行中。当屏幕尺寸很小时，我希望它们全部落入一列。我怀疑外部<div class="row" 是移动行为的原因，但在桌面上，如果不使用它，我无法让第 0 条与其他条保持在同一行。我知道我可能缺少有关 Bootstrap 的一些基本知识，因此必须有更好的方法来做到这一点。

如何使这种在桌面上运行良好的布局在移动设备上正常呈现？谢谢。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

如果您只指定class="col-3"，那么这将适用于所有屏幕尺寸。如果你想为特定大小覆盖它，你必须用一个 css 类覆盖它，比如：

col-sm-3

您可以在 -sm、-md、-lg 和 -xl 之间进行选择，具体取决于您想要影响的屏幕尺寸。

所以你的应该是这样的：

  <div>
    <div class="row">
      <div class="col-md-4">
        <div>
          Article 0
        </div>
      </div>
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-3">
            Article 1
          </div>
          <div class="col-md-3">
            Article 2
          </div>
          <div class="col-md-3">
            Article 3
          </div>
          <div class="col-md-3">
            Article 4
          </div>
          <div class="col-md-3">
            Article 5
          </div>
          <div class="col-md-3">
            Article 6
          </div>
          <div class="col-md-3">
            Article 7
          </div>
          <div class="col-3">
            Article 8
          </div>
        </div>
      </div>
    </div>
  </div>

更多信息请参见bootstraps grid documentation

【讨论】：

【解决方案2】：

当您设置<div class="col-3"> 时，您是在告诉引导程序让该 div 在每个断点上占据三列，即使是最小的屏幕也是如此。要解决这个问题，请告诉 Bootstrap 使该 div 在具有 col-12 的小屏幕上占据整个宽度，而在中等大小的屏幕上仅占据三列，并在 col-md-3 上占据上一栏。例如。 <div class="col-12 col-md-3">

 <div>
    <div class="row">
      <div class="col-12 col-md-4">
        <div>
          Article 0
        </div>
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col-12 col-md-3">
            Article 1
          </div>
          <div class="col-12 col-md-3">
            Article 2
          </div>
          <div class="col-12 col-md-3">
            Article 3
          </div>
          <div class="col-12 col-md-3">
            Article 4
          </div>
          <div class="col-12 col-md-3">
            Article 5
          </div>
          <div class="col-12 col-md-3">
            Article 6
          </div>
          <div class="col-12 col-md-3">
            Article 7
          </div>
          <div class="col-12 col-md-3">
            Article 8
          </div>
        </div>
      </div>
    </div>
  </div>

Bootply example

【讨论】：

【解决方案3】：

尝试使用col-md-* 而不是col-*。 More info

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-md-4">
    <div>
      Article 0
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-3">
        Article 1
      </div>
      <div class="col-md-3">
        Article 2
      </div>
      <div class="col-md-3">
        Article 3
      </div>
      <div class="col-md-3">
        Article 4
      </div>
      <div class="col-md-3">
        Article 5
      </div>
      <div class="col-md-3">
        Article 6
      </div>
      <div class="col-md-3">
        Article 7
      </div>
      <div class="col-md-3">
        Article 8
      </div>
    </div>
  </div>
</div>

【讨论】：

如果有一些解释，您的答案会更好（尽管我承认 Bootstrap 文档已经做得很好）。

【解决方案4】：

我建议你使用命令 col- *

我做了一个例子，像演示中一样将内容放在中间

.flex{
  display: flex;
}

.align-middle{
    margin-top: auto;
    margin-bottom: auto;
}

div.borda{
  border: 1px solid red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-4 flex borda">
    <div class="align-middle">
      Article 0   
    </div>
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-3 borda">
        Article 1
      </div>
      <div class="col-3 borda">
        Article 2
      </div>
      <div class="col-3 borda">
        Article 3
      </div>
      <div class="col-3 borda">
        Article 4
      </div>
      <div class="col-3 borda">
        Article 5
      </div>
      <div class="col-3 borda">
        Article 6
      </div>
      <div class="col-3 borda">
        Article 7
      </div>
      <div class="col-3 borda">
        Article 8
      </div>
    </div>
  </div>
</div>

【讨论】：