Question

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

此通用布局的要求是：在其自己的列中包含一篇“特色”文章，在另一列中的两行中包含其他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"

这在台式机上效果很好，但在移动设备上，每个元素都卡在了一行上。我希望它们在屏幕尺寸较小时都可以归为一列。我怀疑外部{{1}}是造成移动行为的原因，但是在台式机上，如果不使用它，我将无法使Article 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

Answer 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

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

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

Bootstrap 4行布局无响应

4 个答案: