html - Bootstrap 4 行布局没有响应

Question

我正在使用 Bootstrap 4 在 MEAN 堆栈上为新闻文章布局创建 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 的基本知识，所以必须有更好的方法来做到这一点。

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

Answer 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了解更多信息