在引导程序中使用容器stream体会导致水平滚动条

这是一个简单的例子：

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

   演示与小提琴中的自定义容器类

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

确保使用容器封装行类。

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

容器用+15偏移行的-15边距。

Answer 6

使用Bootstrap 3.3.5，我在从介质（md）到小（sm）屏幕大小的变化附近获得了一定宽度的水平滚动条。 在我的div.container-fluid和div.row之间添加一个div.row为我解决了这个问题。

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

在我的情况下，将@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); } 

所以，如果你select一个奇怪的gutter-width那么你将最终有不均匀的填充，你会看到一个水平滚动条。

Answer 8

在容器类中设置最大宽度而不是宽度。 它将删除水平栏。

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

Answer 9

您可以通过添加新的类到全宽行来肮脏的破解行，并创build覆盖的CSS文件：

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

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