Bootstrap行不占用100%宽度

Dev*_*nsh 4 html css twitter-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>
Run Code Online (Sandbox Code Playgroud)

这是CSS:

.center-text{
  text-align: center;
}
#heading{
  padding: 60px;
}
.border-show{
  border-style: solid;
  border-color: black;
}
Run Code Online (Sandbox Code Playgroud)

Lef*_*oon 46

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

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

  • 我登录只是为了支持您的答案,因为这正是我需要的信息。谢谢 (8认同)
  • 该死的好提示。花了几个小时试图弄清楚为什么我的行和列不起作用,只是意识到我已经在使用 Flex。 (3认同)
  • @罗伯特,我登录只是为了支持你的评论,因为我认为你登录只是为了支持你很好...... (2认同)

Zim*_*Zim 12

将其从container.中删除.的container是不是100%的宽度,并且不应当被嵌套在另一个容器中.