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

Question

这是一个简单的例子：

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

Demo in Fiddle

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

为什么会这样？

我做错了什么？

Answer 1

container-fluid最初是从Bootstrap 3.0中删除的，但是added back in 3.1.1

要解决此问题，您可以 ：

1. 使用newer version of Bootstrap style sheet

   Demo with New Style Sheet in Fiddle

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

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

   要解决此问题，您需要向.container-fluid类

   添加填充

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

   Demo with Custom container class in Fiddle

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;
}

快速轻松解决这就是您所需要的一切

Answer 5

确保使用容器封装行类。

Vagrant.configure(2) do |config|
    config.vm.box = "hashicorp/precise32"
end

容器使用<div class="container"> <div class="row"> text </div> </div> 抵消行上的-15页边距。

Answer 6

您可以通过向全宽行添加新类并创建覆盖css文件来破解行：

＆＃13;

＆＃13;

.noLRMar{
  margin-right: 0 !important;
  margin-left: 0 !important;
 }

＆＃13;

<div class="row noLRMar">
  
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 7

使用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;添加到您的行会破坏一些样式元素。

Answer 8

在我的情况下，将@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，那么你最终会得到不均匀的填充，你会看到一个水平滚动条。

Answer 9

我遇到了同样的问题，单独使用.container-fluid可以创建水平滚动，但是我使用嵌套的.container进行了固定，希望对您有所帮助！

<div class="container-fluid">
    <div class="container">
    </div>
</div>

Answer 10

在容器类中设置 max-width 而不是width。它将删除水平条。

.container-fluid { 
    border:1px solid red;
    max-width:1349px;
    min-height:1356px;
    padding:0px;
    margin:0px; 
}