使用Bootstrap 4，我试图将.container放入我的.navbar中，这样我的导航栏背景颜色可以一直穿过屏幕，而我的导航栏按钮可以左对齐我的页面内容。
然而，我发现它们实际上没有对齐，因为导航栏中的这样一个容器比页面上的常规容器宽30px（它们都改变了每个断点的宽度，但差异总是30px，除了xs断点）。我做错了什么？
<div class="navbar navbar-expand">
<div class="container">
<!-- navbar contents -->
</div>
</div>
<div class="container">
<!-- page contents -->
</div>
答案 0 :(得分：0)
您想使用.container-fluid类而不是.container。 grid的引导文档在第一个项目符号点解释了这一点＆＃34;使用.container获取响应的像素宽度或.container-fluid的宽度：所有视口和设备大小均为100％。＆＃34; < / p>
答案 1 :(得分：0)
见：http://getbootstrap.com/docs/4.1/examples/navbars/
.navbar-expand-xx中的容器会删除左右填充。
这就是为什么内容中的容器与导航栏中的容器不对齐的原因。非解决方案是删除类navbar-expand-xx。
一个hacky解决方案是将.px-3添加到容器中，在两侧添加1rem（大约15px）。
您可以签入$grid-gutter-width实际上是30px的variables.scss。在_grid.scss中，你会发现，该值除以2来制作排水沟。
你在设计上没有做错任何事。