0

我知道这将是一个愚蠢的问题，但我是一个新手，它困扰了我几个小时。我正在关注一个容器 > 行 > col 结构，但我所有的 cols 都出现在同一行中。根据引导程序，一行应该只有 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>

我在这里找不到什么问题，将不胜感激。 在此处输入图像描述

4

2 回答 2

0

为什么要使用流体容器？引导设计以相应地响应。让下面的代码片段全屏你会知道，在这种方法中，当网格增加超过 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>

于 2020-06-29T06:32:41.527 回答
0

我使用以下代码在CodePen 沙箱中重新创建了您的用例：

<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 系统的文档：

上面的示例使用我们预定义的网格类在小型、中型、大型和超大型设备上创建等宽列。这些列在父页面的中心.container。

使用 Bootstrap 时，不一定需要使用container-fluid，除非你想width: 100%在所有断点处设置容器（不同的设备宽度：Small ≥ 576px、Medium ≥ 768px、Large ≥ 992px 等等……）。在此处查看有关其 Container 的 Bootstrap 文档。

如果您想将 all 设置div为 have text-center，您可以执行以下操作以避免将不必要的类添加到您的divs.

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

我希望这有助于解决您的问题！如果您有后续问题，请告诉我

于 2020-06-29T06:56:44.140 回答