如何在没有水平滚动条的情况下制作引导程序3stream体布局
这里是示例链接： http : //bootply.com/76369
这是我使用的HTML。
<div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> 自举3没有容器stream体和排液。
我无法用.container类来包装它，因为它会变成固定布局。
如何使它stream畅 （整页宽度） 布局？ （ 没有水平滚动条 ）
与这些标记。 当你在结果中查看时， x-scroll栏是可见的，所以你可以滚动到左右不应该。
编辑：2015-12-09
已经得到答案和Bootstrap已经从3.1.0发布了修复
这是在v3.1.0中引入的： http ://getbootstrap.com/css/#grid-example-fluid
提交＃62736046添加了“全容器和布局的容器stream体变体”。
我也有它，并在等待他们修复它，我加了这个耻辱的CSS：
body { overflow-x: hidden;}
这是一个可怕的select，但它的工作。 当他们解决问题时，我很乐意将其删除。
正如问题中指出的另一种select是覆盖.row ：
.row { margin-left: 0px; margin-right: 0px; }
这是BS 3中的一个已知问题 – https://github.com/twbs/bootstrap/issues/9862?source=cc
我已经在Bootply上使用最新版本进行了testing，所以请继续关注GitHub以获取最新的更新/修复。
更新
这是一个非问题。 Bootstrap 3 .row必须用在.container或.container-fluid以抵消行中的负边距。 这将消除水平滚动条。
从文档…
行必须放置在.container（固定宽度）或.container-fluid（全宽度）内才能正确alignment和填充。
如果我理解正确，在任何媒体查询之后添加此设置将覆盖默认网格上的宽度限制。 适用于bootstrap 3，我需要100％宽度的布局
.container { max-width: 100%; /* This will remove the outer padding, and push content edge to edge */ padding-right: 0; padding-left: 0; }
然后你可以把你的行和网格元素放在容器中。
从Bootstrap文档，2014年更新：
网格和全宽布局想要创build完全stream畅的布局的人们（意味着你的网站拉伸视口的整个宽度）必须将他们的网格内容包装在包含的元素与填充：0 15px; 以抵消保证金：0 -15px; 用于.rows。
只是我在这里2美分。 大多数情况下，这对你来说就像对我一样。
body > .row { margin-left: 0px; margin-right: 0px; }
我碰到了同样的问题（想要一个stream畅的布局），但想保持响应选项重新排列列等等较小的屏幕，并结束了一个小变化variables。
// Large screen / wide desktop (last row of file) @container-lg-desktop: 100%; //((1140px + @grid-gutter-width));
这个值在grid.less和sets中使用一次
@media (min-width: @screen-lg-desktop) { .container { max-width: @container-lg-desktop; } .... }
结果是超过1200px的网格是stream体（没有水平滚动条）。 在此之下，正常的响应规则适用。 您当然可以将其设置为其他媒体查询。
如果你不想编辑和编译。你可以在你自己的样式表中将最大宽度覆盖到下面：
@media (min-width: 1200px) { /* or min-width: wherever-you-want-your-fluid-breakpoint */ body .container { max-width: 100%; } }
所有这些假设你使用正常的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>
希望这可以帮助！
在Twitter Bootstrap的最新版本中，默认情况下布局是stream畅的，因此您不需要额外的类就可以将布局声明为stream畅。
你可以进一步参考 –
http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/
这对我有效。 在FF，Chrome，IE11，IE10testing
.row { width:99.99%; }
如果container-fluid div直接放置在body内，则会出现水平滚动条。
使用container-fluid结构的正确方法是：
<body> <section> <div class="container-fluid"> <div class="row"> <!-- content goes here --> </div> </div> </section> </body>
所以，试着将你的container-fluid DIV包装在一个外部的div中，比如<div id="wrap">或者<section>或者<article>或者<aside>或者其他专门的<div> ，然后presto！ 没有水平滚动条。
在Bootstrap 3中，将列立即放在body下应该给你一个没有水平滚动条的stream畅的布局
<body> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </body>
引导3.0版本是棘手的，他们将添加解决这个问题，并可能在Bootstrap 3.1中返回容器stream体。 但在此之前，这是我正在使用的修复程序：
首先，您需要自定义容器并将其设置为100％宽度，然后您将需要修复行边距处置，如果有的话还需要导航栏：
/* Custom container */ .container-full { margin: 0 auto; width: 100%; } /*fix row -15px margin*/ .container-fluid { padding: 0 15px; } /*fix navbar margin*/ .navbar{ margin: 0 -15px; } /*fix navbar-right margin*/ .navbar-nav.navbar-right:last-child { margin-right: 0px; }
您可以在root div上堆叠容器满容器和容器stream体类，稍后可以使用容器stream体。
希望它有帮助，如果你需要更多的信息让我知道。
find了这个解决方法
.row { margin-left: 0; margin-right: 0; } [class^="col-"] > [class^="col-"]:first-child, [class^="col-"] > [class*=" col-"]:first-child [class*=" col-"] > [class^="col-"]:first-child, [class*=" col-"]> [class*=" col-"]:first-child, .row > [class^="col-"]:first-child, .row > [class*=" col-"]:first-child{ padding-left: 0px; } [class^="col-"] > [class^="col-"]:last-child, [class^="col-"] > [class*=" col-"]:last-child [class*=" col-"] > [class^="col-"]:last-child, [class*=" col-"]> [class*=" col-"]:last-child, .row > [class^="col-"]:last-child, .row > [class*=" col-"]:last-child{ padding-right: 0px; }
这是为我工作。 我添加了一个内联样式来删除右边的小边距。 我不太喜欢内联样式，但是在我的html中，这个单独的样式属性使我很容易记住拼接到我的分开的代码中的黑客作业。 它也消除了引导默认样式表之前或之后的外部样式加载问题。
<div class="row" style="margin-right:0px;"> <div class="col-md-6"> <div class="col-md-6"> </div>
似乎摆脱了横向滚动条适用于身体
overflow-x: hidden;
如果还是真的有人，我的解决scheme如下：
.container{ overflow: hidden; overflow-y: auto; }
它默认情况下已经是stream畅的了。 如果你想要更小的宽度而不是col-md-6使用col-sm-6或者col-xs-6 。
你可以解决这个问题，而不会打扰引导的CSS，并等待下一个版本的修复，所以你可以简单地包装你的行，通过定义你自己的类.containerstream体与填充。
//Add this class to your global css file <style> .container-fluid { padding: 0 15px; } </style> //Wrap your rows in within this .container-fluid <div class="container-fluid"> <div class="row"> <div class="col-md-3">content</div> <div class="col-md-9">content</div> <div class="col-md-3">content</div> </div> </div>
如果所有的孩子都是行，你可以在身体元素的两侧添加一个10px的填充
body { padding: 0 10px; }
如果你的HTML标记看起来像这样：
<body> <div class="row"></div> <div class="row"></div> <div class="row"></div> </body>
行有一个10 px的负余量。 这就是导致溢出的原因。 如果你将10px的填充添加到body中，它们将互相取消。
唯一帮助我的是在我的html DOM的最顶端的<div class="row">中设置margin:0px 。
这又不是解决问题的最有吸引力的方法，但因为它只在一个地方，所以我把它放在内联。
作为一个容器stream体和明显的引导修复只引入了可见页面两侧增加的空白… :(尽pipe我通过阅读github问题来回读解我的解决scheme – 非常值得阅读。
在一个答案中总结最相关的评论：
- 这是一个已知的错误
- 有解决办法，但你可能不需要它们（继续阅读）
- 它发生在元素直接放在体内时，而不是在容器stream体 div或其他包含div的内部。 把它们直接放在身体里，正是大部分人在本地testing的时候所做的。 一旦你把你的代码放在完整的页面（所以在一个容器stream体或另一个容器div），你将不会面临这个问题（不需要改变任何东西）。
