Bootstrap 4 到 Bootstrap 5 迁移，容器问题答案

【问题标题】：Bootstrap 4 to Bootstrap 5 migration, container issueBootstrap 4 到 Bootstrap 5 迁移，容器问题
【发布时间】：2021-09-03 00:57:58
【问题描述】：

希望从 Bootstrap 4 迁移到 Bootstrap 5。容器最大宽度在默认设置下似乎不同。知道为什么以及应该更改哪些内容以使其看起来像 Bootstrap 4？我是 Bootstrap 的新手，如果问题有误，请告诉我最快的方法是什么。

【问题讨论】：

Bootstrap 4 的 containers 从超小到超大。 Bootstrap 5 的 containers 从超小尺寸变为 XX 大尺寸，增加了一种尺寸，以支持现在使用的更宽的显示器。如果您不希望您的内容传播的宽度超过一定范围，请为您的容器添加一个最大宽度。

标签： css twitter-bootstrap media-queries bootstrap-5

【解决方案1】：

由于 Bootstrap 5 在 1400px 添加了一个新的 XXL 断点，最宽的容器断点从 1140px (Bootstrap 4) 增加到 1320px (Bootstrap 5)。

因此，如果您想要与 Bootstrap 4 相同的容器宽度行为，请覆盖 XXL 断点的 .container max-width CSS...

@media (min-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

Responsive Demo

【讨论】：

【解决方案2】：

Bootstrap 5 包含六个默认断点。

这些断点可以通过 Sass 自定义。您可以在 bootstrap 的 _variables.scss 样式表中找到它们。

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px   // Use 1140px instead; 
);

如果你不使用 Sass，只需将 .container 的最大宽度重写为 @Zim 提到的。

@media (min-width: 1400px) {
  .container {
    max-width: 1140px;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col bg-info p-5">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, ratione eum? Alias ipsa illum tempore, maxime cumque accusamus quos quidem culpa pariatur porro sit atque deleniti delectus consectetur praesentium. Eligendi?
    </div>
  </div>
</div>

【讨论】：