如何使用 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-xssince 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>

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

How to display two columns in mobile using bootstrap 5?

html

bootstrap-5