如何使用 BS4 在移动屏幕上将每行 3 列的 2 行拆分为 3 行，每行 2 列

Question

我在桌面视图中有 2 行 3 列，如下所示：

    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>

我希望它们在移动设备上自动分成 3 行 2 列，如下所示：

<div class="row">
  <div class="col-xs-6">
    1
  </div>
  <div class="col-xs-6">
    2
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    3
  </div>
  <div class="col-xs-6">
    1
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    2
  </div>
  <div class="col-xs-6">
    3
  </div>
</div>

bs4 中是否有预定义的方法可以做到这一点或仅此而已CSS我不想为此使用 js，因为有太多行和列具有不同的 id 和 class .谢谢！

Answer 1

试试这个，

您可以在单个 row class 中使用 col div 项目。

col-xs-* 已在 Bootstrap 4 中删除，取而代之的是 col-*。

将 col-xs-6 替换为 col-6，它将按预期工作。

桌面视图

手机浏览

有关Bootstrap Grid system的更多信息

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container mt-3 text-center">
  <div class="row w-100 mx-auto">
    <div class="col-md-4 col-6 border">1</div>
    <div class="col-md-4 col-6 border">2</div>
    <div class="col-md-4 col-6 border">3</div>
    <div class="col-md-4 col-6 border">1</div>
    <div class="col-md-4 col-6 border">2</div>
    <div class="col-md-4 col-6 border">3</div>
  </div>
</div>

Answer 2

<div class="row">
      <div class="col-md-4 col-sm">
        1
      </div>

      <div class="col-md-4 col-sm">
        2
      </div>
</div>

<div class="row">

      <div class="col-md-4 col-sm">
        1
      </div>

      <div class="col-md-4 col-sm">
        2
      </div>

</div>

<div class="row">

      <div class="col-md-4 col-sm">
        1
      </div>

      <div class="col-md-4 col-sm">
        2
      </div>

</div>

如何使用 BS4 在移动屏幕上将每行 3 列的 2 行拆分为 3 行，每行 2 列

How to split 2 rows having 3 cols each into 3 rows having 2 cols each on mobile screen using BS4

html

css

grid

bootstrap-4