在引导程序中，为什么 .navbar 中的 .container 比页面中的常规 .container 宽？答案

【问题标题】：In bootstrap, why is .container inside .navbar wider than regular .container in page?在引导程序中，为什么 .navbar 中的 .container 比页面中的常规 .container 宽？
【发布时间】：2023-03-21 10:25:01
【问题描述】：

使用 Bootstrap 4，我试图在我的 .navbar 中放置一个 .container，以便我的导航栏背景颜色可以一直穿过屏幕，而我的导航栏按钮可以与我的页面内容左对齐。

但是，我发现它们实际上并没有对齐，因为导航栏中的这样一个容器比页面上的常规容器宽 30px（它们在每个断点上都会改变宽度，但差异始终是 30px，xs 除外断点）。我做错了什么？

<div class="navbar navbar-expand">
  <div class="container">
    <!-- navbar contents -->
  </div>
</div>
<div class="container">
  <!-- page contents -->
</div>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

您想使用.container-fluid 类而不是.container。 grid 的引导文档在他们的第一个要点中解释了这一点“使用 .container 作为响应式像素宽度或使用 .container-fluid 作为宽度：在所有视口和设备尺寸上 100%。”

【讨论】：

【解决方案2】：

见于：http://getbootstrap.com/docs/4.1/examples/navbars/

.navbar-expand-xx 中的容器移除左右内边距。

这就是内容中的容器与导航栏中的容器不一致的原因。一个非解决方案是删除类navbar-expand-xx。

一个 hacky 解决方案是将 .px-3 添加到容器中，该容器在两侧添加 1rem（大约 15 像素）。

您可以在 variables.scss 中检查 $grid-gutter-width 实际上是 30px。在 _grid.scss 中，您会发现，该值除以 2 以形成排水沟。

您没有做错任何事情，这是设计使然。

【讨论】：