如何使用bootstrap 5在移动设备中显示两列？

Question

我正在使用 bootstrap 5。我必须在手机上显示 2 列，但它显示 1 列。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="container">
  <div class="row">

    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
      <h2>Heading one</h2>
    </div>
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
      <h2>Heading Two</h2>
    </div>
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
      <h2>Heading Three</h2>
    </div>
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
      <h2>Heading Four</h2>
    </div>

  </div>

</div>

下面是浏览器的截图。

Answer 1

col-xs 从 v4 开始就没有了，所以改为col-6

注意：您也不需要重复相同的断点。只需使用第一个（因为它是移动优先）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-6">
      <h2>Heading one</h2>
    </div>
    <div class="col-lg-3 col-6">
      <h2>Heading Two</h2>
    </div>
    <div class="col-lg-3 col-6">
      <h2>Heading Three</h2>
    </div>
    <div class="col-lg-3 col-6">
      <h2>Heading Four</h2>
    </div>
  </div>
</div>