Twitter bootstrap 在引导中，为什么.container在.navbar中比页面中的常规.container宽？

在Bootstrap4中，我试图在.navbar中放置一个.container，这样我的navbar背景色就可以在整个屏幕上显示，而我的navbar按钮可以与页面内容向左对齐

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

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

---

您想使用

.container fluid

类而不是

.container

。的引导文档在其第一个要点“使用.container表示响应像素宽度或.container表示宽度：100%表示所有视口和设备大小”中对此进行了解释。

如所示：

.navbar中的容器展开xx

删除左侧和右侧填充

这就是内容中的容器与导航栏中的容器不对齐的原因。非解决方案是删除类

navbar expand xx

一个老套的解决方案是将

.px-3

添加到容器中，在容器两侧添加

1rem

（约15px）

您可以在variables.scs中检查

$grid ground width

实际上是30px。在_grid.scss中，您会发现，该值除以2，形成排水沟

你没有做错什么，这是故意的