Bootstrap cols 在嵌套行上的奇怪行为，在 sm 和 xs 断点之间答案

【问题标题】：Strange behavior of Bootsrap cols on nested rows, between sm and xs breakpointsBootstrap cols 在嵌套行上的奇怪行为，在 sm 和 xs 断点之间
【发布时间】：2022-02-15 00:45:06
【问题描述】：

我正在使用 Bootstrap 5 编写一个小网站。我试图在断点 >= md 的两行上显示 6 个元素，对于较小的断点在单行上显示。它适用于sm断点，但是当我减少到xs断点时，6个元素显示在垂直线上o_O而且我不明白为什么......

上面的代码被简化为只包含重现问题所需的内容，我的代码的其他元素（其他行...）似乎与我的问题无关。

谢谢！

<!doctype html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-2">
        <div class="row text-center">
          <div class="col-md-4 col-sm-2">A</div>
          <div class="col-md-4 col-sm-2">B</div>
          <div class="col-md-4 col-sm-2">C</div>
          <div class="col-md-4 col-sm-2">D</div>
          <div class="col-md-4 col-sm-2">E</div>
          <div class="col-md-4 col-sm-2">F</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

你需要设置xs断点。由于您没有定义元素的宽度，因此它们将是 100% 宽度的块级元素。只需将您的字母元素上的col-sm-2 更改为col-xs-2。您还应该将容器上的col-sm-12 更改为col-xs-12
@disinfor 我试过了，但是当我这样做时，xs 和 sm 断点的 6 个元素都显示在一条垂直线上
啊...我忘了，只是col-2你不需要断点大小。

标签： html css bootstrap-5

【解决方案1】：

您只需将 col-sm-2 更改为 col-2 即可使用以下示例：

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-2">A</div>
            <div class="col-md-4 col-2">B</div>
            <div class="col-md-4 col-2">C</div>
            <div class="col-md-4 col-2">D</div>
            <div class="col-md-4 col-2">E</div>
            <div class="col-md-4 col-2">F</div>
        </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

不需要断点标识符。 col-2 会起作用。

<!doctype html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-2">
        <div class="row text-center">
          <div class="col-md-4 col-2">A</div>
          <div class="col-md-4 col-2">B</div>
          <div class="col-md-4 col-2">C</div>
          <div class="col-md-4 col-2">D</div>
          <div class="col-md-4 col-2">E</div>
          <div class="col-md-4 col-2">F</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

就是这么简单 xD 非常感谢它的工作...

【解决方案3】：

记住Bootstrap是从小屏到大屏开始断点的，在这个link，他们讲的是网格的行为问候

【讨论】：