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

Question

希望从 Bootstrap 4 迁移到 Bootstrap 5。默认设置下的容器最大宽度似乎有所不同。知道为什么以及应该将什么更改为 Bootstrap 4 吗？我是 Bootstrap 的新手，如果问题有误，请告诉我什么是最快的开始方式。

Answer 1

自从Bootstrap5在1400px添加了新的XXL断点，最宽的容器断点从1140px增加（Bootstrap 4) 至 1320px (Bootstrap 5).

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

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

Responsive Demo

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

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

Bootstrap 4 to Bootstrap 5 migration, container issue

css

media-queries

twitter-bootstrap

bootstrap-5