如何使用 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如何使用 BS4 在移动屏幕上将每行 3 列的 2 行拆分为 3 行，每行 2 列
【发布时间】：2021-01-07 10:00:32
【问题描述】：

我在桌面视图上有 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 和类。谢谢！

【问题讨论】：

使用col-6 而不是col-xs-6。
然后将每个col div 添加到一个row 类中。

标签： html css bootstrap-4 grid

【解决方案1】：

试试这个，

您可以在单个 row 类中使用 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>

【讨论】：

【解决方案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>

【讨论】：