为什么我应该在Bootstrap 4的Row上使用W-100

Question

在我的项目中，容器是流动的并且占据了整个宽度。但是排在后面的仅占大约60％。

图片

容器：

行：

为什么在使用Bootstrap文档示例时该行是全角的？图文化：

Answer 1

简短答案：

请勿在导航栏中使用Bootstrap 4网格row> col。

导航栏设计为仅包含supported content，而不包含网格。根据需要使用utility classes对齐或设置导航栏内容的宽度。由于显示了导航栏：flex子项将遵循flexbox规则。

说明：

  

“为什么使用Bootstrap文档示例时会发生这种情况   该行是全宽吗？”

因为文档没有在flexbox导航栏中使用row> col。

在导航栏中使用container-fluid时，display:flex默认使用align-items:flex-start。这会导致row粘在左侧（开始弯曲），除非{{1}上使用width：100％（w-100），否则它不会延伸到全角。 }。