Html 如何在没有水平滚动条的情况下制作 bootstrap 3 流体布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18392477/
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
How to make bootstrap 3 fluid layout without horizontal scrollbar
提问by vee
here is sample link: http://bootply.com/76369
这是示例链接：http: //bootply.com/76369
this is html i use.
这是我使用的 html。
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
bootstrap 3 has no container-fluid and row-fluid.
bootstrap 3 没有容器流体和行流体。
i cannot wrap it with .container class because it will become fixed layout.
我不能用 .container 类包装它，因为它会变成固定布局。
how to make it fluid(full page width) layout?(without horizontal scrollbar)
如何使其流畅（整页宽度）布局？（没有水平滚动条）
with these markup. when you view in the result the x-scrollbar is visible so you can scroll to left and right that it should not.
用这些标记。当您查看结果时，x 滚动条是可见的，因此您可以向左和向右滚动，而不是向左和向右滚动。
edited: 2015-12-09
Already got answer and Bootstrap already released the fix since 3.1.0
编辑：2015-12-09
已经得到答案，Bootstrap 自 3.1.0 以来已经发布了修复程序
采纳答案by Martin
This was introduced in v3.1.0: http://getbootstrap.com/css/#grid-example-fluid
这是在 v3.1.0 中引入的：http://getbootstrap.com/css/#grid-example-fluid
Commit #62736046added ".container-fluid variation for full-width containers and layouts".
提交#62736046添加了“全宽容器和布局的 .container-fluid 变体”。
回答by Cyril N.
I also have it and while waiting on them to fix it, I added this shame css :
我也有它，在等待他们修复它的同时，我添加了这个羞耻的 css ：
body { overflow-x: hidden;}
body { overflow-x: hidden;}
it's an horrible alternative, but it work. I'll be happy to remove it when they'll have fixed the issue.
这是一个可怕的选择，但它有效。当他们解决问题时，我很乐意将其删除。
An other alternative, as pointed out in the issue, is to override .row:
正如问题中所指出的，另一种选择是覆盖.row：
.row {
margin-left: 0px;
margin-right: 0px;
}
回答by Zim
This is a known issue in BS 3 - https://github.com/twbs/bootstrap/issues/9862?source=cc
这是 BS 3 中的一个已知问题 - https://github.com/twbs/bootstrap/issues/9862?source=cc
I have tested on Bootply using the latest build, so keep watching GitHub for the latest updates/fix.
我已经使用最新版本在 Bootply 上进行了测试，因此请继续关注 GitHub 以获取最新的更新/修复。
In Bootstrap 3, .rowis must be used inside a .containeror .container-fluidto counteract the negative margins on the row. This will eliminate the horizontal scrollbar.
在 Bootstrap 3 中，.rowis 必须在 a .containeror内使用.container-fluid以抵消行上的负边距。这将消除水平滚动条。
From the docs...
从文档...
"Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding."
“行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。”
Bootstrap 4
引导程序 4
The container>row>colrelationship work the same way as 3.x...
该container> row>col关系工作方式一样3.X ...
"Containers are the most basic layout element in Bootstrap and are required when using our default grid system"
“容器是 Bootstrap 中最基本的布局元素，在使用我们的默认网格系统时是必需的”
回答by Tamik Soziev
Update from 2014, from Bootstrap docs:
2014 年更新，来自 Bootstrap 文档：
Grids and full-width layouts Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px;to offset the margin: 0 -15px;used on .rows.
网格和全宽布局希望创建完全流畅的布局（意味着您的站点延伸视口的整个宽度）的人们必须将他们的网格内容包装在一个包含元素中，padding: 0 15px; 偏移边距：0 -15px；用于 .rows。
回答by Beau
If I understand you correctly, Adding this after any media queries overrides the width restrictions on the default grids. Works for me on bootstrap 3 where I needed a 100% width layout
如果我理解正确，在任何媒体查询之后添加它会覆盖默认网格的宽度限制。适用于我需要 100% 宽度布局的 bootstrap 3
.container {
max-width: 100%;
/* This will remove the outer padding, and push content edge to edge */
padding-right: 0;
padding-left: 0;
}
Then you can put your row and grid elements inside the container.
然后您可以将行和网格元素放入容器内。
回答by M K
Just my 2 cents here. Mostly this will work for you, as it did for me.
这里只有我的 2 美分。大多数情况下，这对你有用，就像对我一样。
body > .row {
margin-left: 0px;
margin-right: 0px;
}
回答by Victor
I ran in to the same problem (wanting a fluid layout) but wanted to keep the responsive options with rearranging columns and so on for smaller screens and ended up with a small change to in variables.less:
我遇到了同样的问题（想要一个流畅的布局），但想保留响应式选项以及重新排列列等小屏幕，最后在 variables.less 中做了一个小改动：
// Large screen / wide desktop (last row of file)
@container-lg-desktop: 100%; //((1140px + @grid-gutter-width));
This value is used once in grid.less and sets
该值在 grid.less 中使用一次并设置
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-lg-desktop;
}
....
}
The result is that over 1200px the grid is fluid (without horizontal scrollbars). Below that the normal responsive rules apply. You can of course set this to other media queries as well just as easily.
结果是超过 1200 像素的网格是流动的（没有水平滚动条）。在此之下，适用正常的响应规则。当然，您也可以轻松地将其设置为其他媒体查询。
If you do not want to edit and compile .less yourself you could override the maxwidth in your own style sheet similair to below:
如果您不想自己编辑和编译 .less，您可以在自己的样式表中覆盖 maxwidth 类似于以下内容：
@media (min-width: 1200px) { /* or min-width: wherever-you-want-your-fluid-breakpoint */
body .container {
max-width: 100%;
}
}
All this assumes you use the normal Bootstrap grid syntax, including container, like below:
所有这些都假设您使用正常的 Bootstrap 网格语法，包括容器，如下所示：
<div class="container">
<div class="row" >
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
Hope this helps!
希望这可以帮助！
回答by TechnoBlahble
In the latest version of Twitter Bootstrap the layout is fluid by default, hence you don't need extra classes to declare your layout as fluid.
在最新版本的 Twitter Bootstrap 中，布局默认是流动的，因此您不需要额外的类来将您的布局声明为流动的。
You can further refer to -
你可以进一步参考——
http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/http://blog.getbootstrap.com/
http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/
回答by CodingYourLife
This worked for me. Tested in FF, Chrome, IE11, IE10
这对我有用。在 FF、Chrome、IE11、IE10 中测试
.row {
width:99.99%;
}
回答by cssyphus
The horizontal scrollbar can appear if the container-fluiddiv is placed directly inside the body.
如果container-fluiddiv 直接放在body.
The correct way to use a container-fluidstructure is:
使用container-fluid结构的正确方法是：
<body>
<section>
<div class="container-fluid">
<div class="row">
<!-- content goes here -->
</div>
</div>
</section>
</body>
So, try wrapping your container-fluidDIVs inside an outer div, such as a <div id="wrap">or a <section>or <article>or <aside>or other specialized <div>, and presto!no horizontal scrollbar.
因此，尝试将您的container-fluidDIV包装在外部 div 中，例如 a<div id="wrap">或 a<section>或<article>or<aside>或其他专门的<div>，并且很快！没有水平滚动条。
