在bootstrap中使用容器流体导致水平滚动条

Question

这是一个简单的例子:

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

小提琴演示

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

为什么会这样？

我究竟做错了什么？

Answer 1

container-fluid最初取自Bootstrap 3.0,但在3.1.1中添加

为了解决这个问题,你可以任:

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

   在小提琴中演示新样式表

2. 或者自己在课堂上添加

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

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

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

   在Fiddle中使用Custom容器类进行演示

Answer 2

我也遇到过这个问题.我不知道问题的原因.它可能是一个错误Twitter Bootstrap.现在,我必须手动添加overflow-x:hidden到我的body标签:

body { 
   overflow-x: hidden;
}

的jsfiddle

Answer 3

在我的情况下,此修复工作正常:

.row {
  margin-left: 0;
  margin-right: 0;
}

Answer 4

.row{
margin: 0px;
}

快速简单的修复这就是你所需要的