55

这是一个简单的例子：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

小提琴中的演示

当我在浏览器中看到结果时，我得到一个水平滚动条。

为什么会这样？

我究竟做错了什么？

4

11 回答 11

56

container-fluid最初是从 Bootstrap 3.0 中取出的，但在 3.1.1 中添加回来

要解决此问题，您可以：

  1. 使用较新版本的 Bootstrap 样式表

    在 Fiddle 中使用新样式表进行演示

  2. 或者自己添加类

    向左和向右.row添加一个边距。15px由于.container-fluid填满了100%屏幕宽度，额外的边距空间会导致溢出问题。

    要解决此问题，您需要向.container-fluid类添加填充

    .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

    在 Fiddle 中使用自定义容器类进行演示

于 2014-05-20T19:26:06.847 回答
46

我也遇到过这个问题。我不知道问题的原因。这可能是来自Twitter Bootstrap. 现在，我必须手动添加overflow-x:hidden到我的body标签：

body { 
   overflow-x: hidden;
}

提琴手

于 2014-05-20T19:26:52.097 回答
14

在我的情况下，这个修复效果很好：

.row {
  margin-left: 0;
  margin-right: 0;
}
于 2015-02-13T12:06:19.427 回答
7 
.row{
margin: 0px;
}

快速轻松修复这就是您所需要的

于 2015-06-24T20:32:47.777 回答
4

确保用容器封装你的行类。

<div class="container">
    <div class="row">
        text
    </div>
</div>

容器-15用+15.

于 2015-05-29T08:23:30.107 回答
3

您可以通过将新类添加到全宽行并创建覆盖 css 文件来破坏该行：

.noLRMar{
  margin-right: 0 !important;
  margin-left: 0 !important;
 }
<div class="row noLRMar">
  
 </div>

于 2016-09-22T18:56:39.980 回答
0

就我而言，更改@grid-gutter-width为奇数导致了这种情况，因为；

mixins/grid.less

.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));
  &:extend(.clearfix all);
}

所以如果你选择一个奇数gutter-width，那么你最终会得到不均匀的填充，你会看到一个水平滚动条。

于 2015-12-22T17:37:05.967 回答
0

引导 5 解决方案：

您可以向.container-fluid元素添加第二个类.overflow-hidden。

于 2022-02-26T13:22:10.650 回答
-1

我遇到了同样的问题，单独使用 .container-fluid 会创建水平滚动，但我用嵌套的 .container 修复了它，希望对您有所帮助！

<div class="container-fluid">
    <div class="container">
    </div>
</div>
于 2019-12-01T20:45:03.520 回答
-2

使用 Bootstrap 3.3.5，在从中等 (md) 到小 (sm) 屏幕尺寸的变化附近，我得到了一个特定宽度的水平滚动条。div.row在我之间添加一个div.container-fluid并div.container为我修复它。

<div class="container-fluid  myFullWidthStylingClass">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    #content
                </div>
            </div>
        </div>
    </div>
</div>

添加margin:0;到您的行会破坏一些样式元素。

于 2015-10-30T13:34:09.513 回答
-2

在容器类中设置max-width而不是宽度。它将删除单杠。

.container-fluid { 
    border:1px solid red;
    max-width:1349px;
    min-height:1356px;
    padding:0px;
    margin:0px; 
}
于 2016-09-01T11:09:17.937 回答