Bootstrap 5 个容器在一行中时表现不同

Question

在 Bootstrap 4.6 容器中，最大宽度为 1320 像素。无论是在一排内部还是外部，这个宽度都是一样的。但是在 Bootstrap 5 中，这是不一样的，我找不到原因。图片： BT4 图片：
– 同一站点但使用 BT5：

HTML:

<body>
<div class="container-fluid">
    <div class="row">
        <div class="container">
        </div>
    </div>

    <div class="row">
        <div class="container">
        </div>
    </div>

    <div class="row">
        <div class="container">
        </div>
    </div>
</div>
</body>

Answer 1

您不应该在 row 中使用 container，它应该是 col，对于自 v3

以来的每个 Bootstrap 版本

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.

检查来自 Bootstrap 5 here

的容器示例

取自 docs

的基本示例

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Bootstrap 5 个容器在一行中时表现不同

Bootstrap 5 containers act different when they are inside a row

html

bootstrap-4

bootstrap-5