Bootstrap 行不占用 100% 宽度

Question

我有一个 bootstrap 网格布局，但该行未占用 100% 的宽度。我正在使用 Bootstrap 4 alpha 6。这是 HTML：

 <div class="container-fluid">
  <h1 class="center-text"  id="heading">[Enter Heaading Here]</h1>
  <div class="container">
    <div height="100px" class="row border-show">
      <div class="col-4" id="one"></div>
      <div class="col-4" id="two"></div>
      <div class="col-4" id="three"></div>
    </div>
  </div>
</div>

这是 CSS：

 .center-text{
  text-align: center;
}
#heading{
  padding: 60px;
}
.border-show{
  border-style: solid;
  border-color: black;
}

原文由 Devansh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 container 中删除它。 container 不是 100% 宽度，不应嵌套在另一个容器中。

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

万一其他人遇到这个问题并且答案没有解决他们的问题，我的问题是因为我没有意识到我正在添加一行并尝试在 Bootstrap 导航栏中设置列。默认情况下，导航栏中已经有一个类似网格的系统，因此如果您尝试在其中添加列，您似乎将其推到了边缘。无论如何，它们都不是必需的。

因此，如果此答案不能解决您的问题，请检查您是否在另一个已经处理间距的 Bootstrap 组件中。您可能正在尝试对您的内容进行双重分隔！

原文由 LeftOnTheMoon 发布，翻译遵循 CC BY-SA 4.0 许可协议