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

Question

在我的项目中，容器是流动的，并且是全宽的。但它之后的行只占了大约 60%。

图片

容器：

排：

为什么在使用 Bootstrap 文档的示例时会发生这种情况，该行是全宽的？用于上下文化的 Img：

标签： twitter-bootstrapbootstrap-4

Answer 1

简短的回答：

不要在导航栏中使用 Bootstrap 4 网格row> col。

导航栏旨在仅包含受支持的内容，而不包含网格。使用实用程序类根据需要对齐或设置导航栏内容的宽度。由于 Navbar 是 display:flex 子项将遵循 flexbox 规则。

解释：

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

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

当您container-fluid在导航栏中使用 a 时，它是默认display:flex使用的。align-items:flex-start这会导致row坚持到左侧（flex-start），并且除非在row.