Question

我知道这将是一个愚蠢的问题，但是我是一个新手，并且困扰了我几个小时。我正在遵循容器>行> col结构，但我所有的col都出现在同一行中。按照自举程序，所有的行都应该只有12列，而其余的所有列都应出现在下一行中。这是HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
      <div class="row m-3 p-3">
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
        <div class="col text-center">akjsdajkshd
        </div>
      </div>
    </div>
</body>
</html>

我在这里找不到问题，将不胜感激。 enter image description here

Answer 1

为什么要使用液体容器？引导程序设计以相应地响应。在下面的代码片段中全屏，您将了解到，用这种方法，当网格增加超过12时，它将自动添加到新行中

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>

  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">1</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">2</div>
    <div class="col-sm-4" style="background-color:lavender;">3</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">4</div>
    <div class="col-sm-4" style="background-color:lavender;">5</div>
  </div>
</div>

</body>
</html>

Answer 2

我使用以下命令在CodePen sandbox中重新创建了您的用例：

<div class="container">
    <div class="row">
        <div class="col-sm">1</div>
        <div class="col-sm">2</div>
        <div class="col-sm">3</div>
        <div class="col-sm">4</div>
        <div class="col-sm">5</div>
        <div class="col-sm">6</div>
        <div class="col-sm">7</div>
        <div class="col-sm">8</div>
        <div class="col-sm">9</div>
        <div class="col-sm">10</div>
        <div class="col-sm">11</div>
        <div class="col-sm">12</div>
    </div>
</div>

引自Bootstrap Grid system上的文档：

以上示例在小号，中号，使用我们预定义的网格类的大型和超大型设备。这些列位于父.container页面的中心。

使用Bootstrap时，不必使用container-fluid，除非您要在所有断点处设置容器width: 100%（不同的设备宽度：Small≥576px，Medium≥768px，Large ≥992px，依此类推...）。参见Bootstrap documentation regarding its Container here。

如果要将所有div设置为具有text-center，则可以执行以下操作以避免将不必要的类添加到divs中。

<div class="container text-center">
...
</div>

我希望这有助于解决您的问题！让我知道您是否有后续问题?

所有引导程序列都出现在同一行中吗？

2 个答案: