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

Question

我正在使用 Bootstrap 5 编写一个小网站。我试图让 6 个元素显示在断点 >= md 的两行上，并在单行上显示较小的断点。它适用于 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>

Answer 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>

Answer 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>

Answer 3

记得Bootstrap从小屏到大屏开始断点，在这个，他们说的是grid的行为此致

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

Strange behavior of Bootsrap cols on nested rows, between sm and xs breakpoints

html

css

bootstrap-5