twitter-bootstrap Bootstrap 行不占用 100% 的宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/43741988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:49:47  来源:igfitidea点击:

Bootstrap row not occupying 100% width

htmlcsstwitter-bootstrap

提问by Devansh

I have a bootstrap grid layout but the row is not occupying 100% width. I am using Bootstrap 4 alpha 6. Here is the HTML:

我有一个引导网格布局,但该行没有占用 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>

Here is the CSS:

这是CSS:

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

回答by Zim

Remove it from the container. The containeris not 100% width, and shouldn't be nested in another container.

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

回答by LeftOnTheMoon

In case someone else comes across this and the answer doesn't solve their problem, my issue that was causing this was because I didn't realize I was adding a row and trying to set up columns in a Bootstrap navbar. navbar already has a grid-like system in it by default, so it seems you are pushing it over the edge if you try to add columns inside of it. They aren't necessary anyway.

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

So if this answer doesn't solve your problem, check to see if you are inside of another Bootstrap component that already handles spacing. You may be trying to double-delimit your content!

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