CSS 在引导程序中使用容器流体会导致水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23768152/
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
using container-fluid within bootstrap cause horizontal scrollbar
提问by agis
Here is a simple example:
这是一个简单的例子：
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">DUMMY CONTENT</div>
</div>
</div>
Demo in Fiddle
小提琴演示
When I see the result in browser I get a horizontal scrollbar.
当我在浏览器中看到结果时，我会得到一个水平滚动条。
Why is this happening?
为什么会这样？
What am I doing wrong?
我究竟做错了什么？
回答by KyleMit
container-fluidwas originally taken out of Bootstrap 3.0, but added back in 3.1.1
container-fluid最初从 Bootstrap 3.0 中取出，但在 3.1.1 中重新添加
To fix this, you can either:
为了解决这个问题，你可以任：
Use the newer version of Bootstrap style sheet
Demo with New Style Sheet in Fiddle
Or add in the class yourself
The
.rowadds a15pxmargin to the left and right. Since.container-fluidfills up100%of the screen width, the extra margin space causes overflow issues.To fix this, you need to add padding to
.container-fluidclass.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }Demo with Custom container class in Fiddle
使用 Fiddle 中的新样式表进行演示
或者自己在类中添加
在
.row增加了15px保证金的左侧和右侧。由于.container-fluid填满了100%屏幕宽度，额外的边距空间会导致溢出问题。要解决此问题，您需要向
.container-fluid类添加填充.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }在 Fiddle 中使用自定义容器类进行演示
回答by lvarayut
回答by Viktor L
In my case this fix worked well:
在我的情况下，此修复程序运行良好：
.row {
margin-left: 0;
margin-right: 0;
}
回答by Christopher Clear
.row{
margin: 0px;
}
quick easy fix this is all you need
快速简单的修复这就是你所需要的
回答by David Stack
Make sure to encapsulate your row classes with containers.
确保使用容器封装您的行类。
<div class="container">
<div class="row">
text
</div>
</div>
The container offsets the -15margins on rows with +15.
容器用 偏移-15行上的边距+15。
回答by Omar Noor
You can dirty hack the row by add new class to the full width row and create overwrite css file:
您可以通过向全宽行添加新类并创建覆盖 css 文件来修改行：
.noLRMar{
margin-right: 0 !important;
margin-left: 0 !important;
}<div class="row noLRMar">
</div>回答by Harsh Vakharia
In my case, changing @grid-gutter-widthto odd number caused this, because;
就我而言，更改@grid-gutter-width为奇数会导致这种情况，因为；
mixins/grid.less
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);
}
So if you pick an odd gutter-widththen you will end up having uneven paddings and you will see a horizontal scrollbar.
所以如果你选择一个奇数，gutter-width那么你最终会出现不均匀的填充，你会看到一个水平滚动条。
回答by Jose Enciso
I got the same problem, using .container-fluid on its own creates horizontal scrolling, but I fixed it with a nested .container, hope that helps!
我遇到了同样的问题，单独使用 .container-fluid 会产生水平滚动，但我用嵌套的 .container 修复了它，希望有帮助！
<div class="container-fluid">
<div class="container">
</div>
</div>
回答by Waleed Khan
Set max-widthin the container class instead of width. It will remove the horizontal bar.
在容器类中设置最大宽度而不是宽度。它将删除单杠。
.container-fluid {
border:1px solid red;
max-width:1349px;
min-height:1356px;
padding:0px;
margin:0px;
}
回答by user5507241
With Bootstrap 3.3.5, I was getting a horizontal scroll bar at certain widths near the change from the medium (md) to small (sm) screen size. Adding a div.rowbetween my div.container-fluidand div.containerfixed it for me.
使用 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>
Adding margin:0;to your rows will break some styling elements.
添加margin:0;到您的行会破坏一些样式元素。
