Bootstrap 4行布局无响应 [英] Bootstrap 4 row layout is not responsive

问题描述

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

I'm creating an html template for a news article layout using Bootstrap 4, on the MEAN stack, but that shouldn't matter...

此通用布局的要求是:在其自己的列中有一篇特色"文章，而在另一列中的两行中有其他8篇文章.在较小的屏幕或移动设备上观看时，其他文章应塞在第一篇的下方，并在必要时彼此遮盖:

The requirements are for this general layout, one 'featured' article in its own column, and 8 other articles on two rows in another column. When viewed on smaller screens or mobile, the other articles should tuck under the first and under each other as necessary:

桌面:

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

手机:

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

这是我用来实现布局的方法:

This is the what I'm using to achieve the layout:

  <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" 是移动行为的原因，但是在台式机上，如果不使用它，我将无法使Article 0与其他人保持同一行.我知道我可能缺少有关Bootstrap的基本知识，因此必须有一种更好的方法来做到这一点.

This works great on desktop, but on mobile every element is jammed together on a single row. I would like them all to fall into a single column when the screen size is small. I suspect the outer <div class="row" is the reason for the mobile behavior, but on desktop I can't get the Article 0 to stay on the same row with the others without using that. I know I'm probably missing something fundamental about Bootstrap, so there must be a better way of doing this.

我如何才能使这种在台式机上工作得很好的布局在移动设备上正确呈现?谢谢.

How can I make this layout, which works great on the desktop, render properly on mobile? Thanks.

推荐答案

如果仅指定 class ="col-3" ，则适用于所有屏幕尺寸.如果要针对特定​​大小覆盖此值，则必须使用css类将其覆盖，例如:

If you only specify class="col-3" then this will be for all screen sizes. If you want to override this for a specific size you have to overwrite it with a css class like:

col- sm -3

在这里，您可以选择-sm，-md，-lg和-xl，具体取决于要影响的屏幕尺寸.

Here you can have the choice between -sm, -md, -lg and -xl, depending on which screensize you want to affect.

所以您的会是这样的:

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

另请参阅自举网格文档以获取更多信息

See also bootstraps grid documentation for further info

这篇关于Bootstrap 4行布局无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！