blocks|key|2788157|text|这是在v3.1.0：http://getbootstrap.com/css/#grid-example-fluid中引入的|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2788158|Commit+#62736046添加了“.container-全宽容器和布局的流体变体”。|2788159|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/css/#grid-example-fluid|1|https://github.com/twbs/bootstrap/commit/6273604601c58284f49b38ae4e52533b9689437c^0|A|1B|0|0|7|9|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>This was introduced in v3.1.0: <a href="http://getbootstrap.com/css/#grid-example-fluid">http://getbootstrap.com/css/#grid-example-fluid</a></p>

<p>Commit <a href="https://github.com/twbs/bootstrap/commit/6273604601c58284f49b38ae4e52533b9689437c">#62736046</a> added ".container-fluid variation for full-width containers and layouts".</p>


blocks|key|2787959|text|我也有它，在等待他们修复它的时候，我添加了这个令人羞愧的css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2787960|body+{+overflow-x:+hidden;}|offset|length|style|CODE|2787961|这是一个可怕的选择，但它是有效的。等他们解决了这个问题，我很乐意把它移除。|2787962|正如issue中指出的那样，另一种替代方法是覆盖.row：|2787963|.row+{
++margin-left:+0px;
++margin-right:+0px;
}|code-block|syntax|javascript|2787964|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/issues/9862?source=cc#issuecomment-23430772^0|0|0|R|0|0|O|4|2|5|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@$D|16|E|17|1|18]]|A|$]]|$1|L|3|M|5|N|7|19|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>I also have it and while waiting on them to fix it, I added this shame css :</p>

<p><code>body { overflow-x: hidden;}</code></p>

<p>it's an horrible alternative, but it work. I'll be happy to remove it when they'll have fixed the issue.</p>

<p>An other alternative, as pointed out in the <a href="https://github.com/twbs/bootstrap/issues/9862?source=cc#issuecomment-23430772">issue</a>, is to override <code>.row</code> :</p>

<pre><code>.row {
  margin-left: 0px;
  margin-right: 0px;
}
</code></pre>


blocks|key|178237|text|如果我没理解错的话，在任何媒体查询后添加此选项将覆盖默认网格的宽度限制。在bootstrap+3上，我需要一个100%25宽度的布局|type|unstyled|depth|inlineStyleRanges|entityRanges|data|178238|.container+{
+++max-width:+100%25;
+++/*+This+will+remove+the+outer+padding,+and+push+content+edge+to+edge+*/
+++padding-right:+0;
+++padding-left:+0;
+}|code-block|syntax|javascript|178239|然后，您可以将行元素和网格元素放入容器中。|178240|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>.container {
   max-width: 100%;
   /* This will remove the outer padding, and push content edge to edge */
   padding-right: 0;
   padding-left: 0;
 }
</code></pre>

<p>Then you can put your row and grid elements inside the container.</p>


blocks|key|3000501|text|2014年更新，来自Bootstrap文档：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3000502|3000503|网格和全宽布局希望创建完全流畅的布局(即您的站点拉伸整个视窗宽度)的用户必须将其网格内容包装在一个包含元素中，并使用填充:0+15px;以偏移页边距:0+-15px;在.rows上使用。|blockquote|offset|length|style|BOLD|3000504|3000505|entityMap^0|0|0|1M|A|1Z|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|N|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|O|8|@$F|P|G|Q|H|I]|$F|R|G|S|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|L|$]]

<p>Update from 2014, from Bootstrap docs: </p>

<blockquote>
  <p>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 <strong>padding: 0
  15px;</strong> to offset the <strong>margin: 0 -15px;</strong> used on .rows.</p>
</blockquote>


blocks|key|3000404|text|这里只有我的2分钱。大多数情况下，这对你是有效的，就像对我一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3000405|body+>+.row+{
++++margin-left:+0px;
++++margin-right:+0px;
}|code-block|syntax|javascript|3000406|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just my 2 cents here. Mostly this will work for you, as it did for me.</p>

<pre><code>body &gt; .row {
    margin-left: 0px;
    margin-right: 0px;
}
</code></pre>


blocks|key|3000436|text|我遇到了同样的问题(想要一个流畅的布局)，但想要在较小的屏幕上保留重新排列列等响应选项，并最终在variables.less中做了一个小更改：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3000437|//+Large+screen+/+wide+desktop++(last+row+of+file)
@container-lg-desktop:++++++++100%25;+//((1140px+%2B+@grid-gutter-width));|code-block|syntax|javascript|3000438|该值在grid.less中使用一次，并设置|3000439|@media+(min-width:+@screen-lg-desktop)+{
++.container+{
++++max-width:+@container-lg-desktop;
++}
++....
}|3000440|结果是超过1200px的网格是流动的(没有水平滚动条)。下面是正常的响应规则。当然，您也可以轻松地将其设置为其他媒体查询。|3000441|如果你不想自己编辑和编译.less，你可以在你自己的样式表中覆盖最大宽度，如下所示：|3000442|@media+(min-width:+1200px)+{++/*+or+min-width:+wherever-you-want-your-fluid-breakpoint+*/
++body+.container+{
++++max-width:+100%25;
++}
}|3000443|所有这些都假设您使用正常的Bootstrap网格语法，包括容器，如下所示：|3000444|<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>|3000445|希望这能有所帮助！|3000446|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>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:</p>

<pre><code>// Large screen / wide desktop  (last row of file)
@container-lg-desktop:        100%; //((1140px + @grid-gutter-width));
</code></pre>

<p>This value is used once in grid.less and sets</p>

<pre><code>@media (min-width: @screen-lg-desktop) {
  .container {
    max-width: @container-lg-desktop;
  }
  ....
}
</code></pre>

<p>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.</p>

<p>If you do not want to edit and compile .less yourself you could override the maxwidth in your own style sheet similair to below:</p>

<pre><code>@media (min-width: 1200px) {  /* or min-width: wherever-you-want-your-fluid-breakpoint */
  body .container {
    max-width: 100%;
  }
}
</code></pre>

<p>All this assumes you use the normal Bootstrap grid syntax, including container, like below:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="row" &gt;
    &lt;div class="col-md-6"&gt;.col-md-6&lt;/div&gt;
    &lt;div class="col-md-6"&gt;.col-md-6&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Hope this helps!</p>


blocks|key|176797|text|在最新版本的Twitter+Bootstrap中，默认情况下布局是流动的，因此你不需要额外的类来声明你的布局是流动的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|176798|你可以进一步参考-|176799|http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/+http://blog.getbootstrap.com/|offset|length|176800|entityMap|0|LINK|mutability|MUTABLE|url|http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/|1|http://blog.getbootstrap.com/^0|0|0|0|2U|0|2V|T|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]|$F|X|G|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

<p>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. </p>

<p>You can further refer to - </p>

<p><a href="http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/" rel="nofollow">http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/</a> 
<a href="http://blog.getbootstrap.com/" rel="nofollow">http://blog.getbootstrap.com/</a></p>


blocks|key|178317|text|这对我很有效。在FF、Chrome、IE11、IE10中测试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|178318|.row+{
++++width:99.99%25;
}|code-block|syntax|javascript|178319|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me. Tested in FF, Chrome, IE11, IE10</p>

<pre><code>.row {
    width:99.99%;
}
</code></pre>


blocks|key|181015|text|如果container-fluid+div直接放在body内部，则会出现水平滚动条。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|181016|使用container-fluid结构的正确方法是：|181017|<body>
++++<section>
++++++++<div+class="container-fluid">
++++++++++++<div+class="row">
++++++++++++++++
++++++++++++</div>
++++++++</div>
++++</section>
</body>|code-block|syntax|javascript|181018|因此，尝试将container-fluid+div包装在外部div中，比如<div+id="wrap">、<section>、<article>、<aside>或其他专门的<div>，然后立即执行！没有水平滚动条。|181019|entityMap^0|2|F|P|4|0|2|F|0|0|6|F|11|F|1H|9|1R|9|21|7|2E|5|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$]]

<p>The horizontal scrollbar can appear if the <code>container-fluid</code> div is placed directly inside the <code>body</code>.</p>

<p>The correct way to use a <code>container-fluid</code> structure is:</p>

<pre><code>&lt;body&gt;
    &lt;section&gt;
        &lt;div class="container-fluid"&gt;
            &lt;div class="row"&gt;
                &lt;!-- content goes here --&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
&lt;/body&gt;
</code></pre>

<p>So, try wrapping your <code>container-fluid</code> DIVs inside an outer div, such as a <code>&lt;div id="wrap"&gt;</code> or a <code>&lt;section&gt;</code> or <code>&lt;article&gt;</code> or <code>&lt;aside&gt;</code> or other specialized <code>&lt;div&gt;</code>, and <em>presto!</em> no horizontal scrollbar.</p>


blocks|key|2787998|text|在Bootstrap+3中，将列直接放在body下面应该会给你一个没有水平滚动条的流畅布局|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2787999|<body>
++<div+class="col-md-6">.col-md-6</div>
++<div+class="col-md-6">.col-md-6</div>
</body>|code-block|syntax|javascript|2788000|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In Bootstrap 3, putting columns immediately under body should give you a fluid layout without horizontal scroll bar</p>

<pre><code>&lt;body&gt;
  &lt;div class="col-md-6"&gt;.col-md-6&lt;/div&gt;
  &lt;div class="col-md-6"&gt;.col-md-6&lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|3000465|text|Bootstrap+3.0版本很棘手，他们将添加此问题的修复程序，并可能在Bootstrap+3.1中返回container-fluid。但在此之前，我使用的是一个修复方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3000466|首先，您需要自定义容器并将其设置为100%25宽度，然后您将需要修复行边距处理，以及导航栏(如果有)：|3000467|/*+Custom+container+*/
.container-full+{
++margin:+0+auto;
++width:+100%25;
}

/*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;
}|code-block|syntax|javascript|3000468|您可以在root+div上堆叠container-full和container-fluid类，稍后可以使用container-fluid。|3000469|希望对您有所帮助，如果您需要更多信息，请让我知道。|3000470|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Bootstrap 3.0 version is tricky they will add fix for this issue and probably return container-fluid in Bootstrap 3.1. But until then here is a fix that I'm using:</p>

<p>First of, you would need custom container and set it to 100% width, and then you will need to fix row margin disposition, and navbar too if you have it:</p>

<pre><code>/* 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;
}
</code></pre>

<p>You can stack container-full and container-fluid classes on root div, and you can use container-fluid later on. </p>

<p>Hope it helps, if you need more info let me know. </p>


blocks|key|2788188|text|找到了此解决方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2788189|.row+{
++margin-left:+0;
++margin-right:+0;
}
[class%5E="col-"]+>+[class%5E="col-"]:first-child,
[class%5E="col-"]+>+[class*="+col-"]:first-child
[class*="+col-"]+>+[class%5E="col-"]:first-child,
[class*="+col-"]>+[class*="+col-"]:first-child,
.row+>+[class%5E="col-"]:first-child,
.row+>+[class*="+col-"]:first-child{
++padding-left:+0px;
}
[class%5E="col-"]+>+[class%5E="col-"]:last-child,
[class%5E="col-"]+>+[class*="+col-"]:last-child
[class*="+col-"]+>+[class%5E="col-"]:last-child,
[class*="+col-"]>+[class*="+col-"]:last-child,
.row+>+[class%5E="col-"]:last-child,
.row+>+[class*="+col-"]:last-child{
++++padding-right:+0px;
}|code-block|syntax|javascript|2788190|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Found this workaround</p>

<pre><code>.row {
  margin-left: 0;
  margin-right: 0;
}
[class^="col-"] &gt; [class^="col-"]:first-child,
[class^="col-"] &gt; [class*=" col-"]:first-child
[class*=" col-"] &gt; [class^="col-"]:first-child,
[class*=" col-"]&gt; [class*=" col-"]:first-child,
.row &gt; [class^="col-"]:first-child,
.row &gt; [class*=" col-"]:first-child{
  padding-left: 0px;
}
[class^="col-"] &gt; [class^="col-"]:last-child,
[class^="col-"] &gt; [class*=" col-"]:last-child
[class*=" col-"] &gt; [class^="col-"]:last-child,
[class*=" col-"]&gt; [class*=" col-"]:last-child,
.row &gt; [class^="col-"]:last-child,
.row &gt; [class*=" col-"]:last-child{
    padding-right: 0px;
}
</code></pre>


blocks|key|180998|text|这就是对我有效的方法。我添加了一个内联样式，去掉了右边的小边距。我真的不喜欢做内联样式，但html中的这个单独的style属性让我很容易记住拼接到我的其他良好分离代码中的hack-job。它还消除了在bootstrap默认样式表之前或之后加载外部样式的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180999|<div+class="row"+style="margin-right:0px;">
++<div+class="col-md-6">
++<div+class="col-md-6">
</div>|code-block|syntax|javascript|181000|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is what worked for me.  I added a style inline to remove the small margin on the right.  I don't really like to do inline styling, but this lone style attribute in my html makes it easy for me to remember about the hack-job spliced into my otherwise well separated code.  It also eliminates the concern of my external styles loading before or after the bootstrap default stylesheet.</p>

<pre><code>&lt;div class="row" style="margin-right:0px;"&gt;
  &lt;div class="col-md-6"&gt;
  &lt;div class="col-md-6"&gt;
&lt;/div&gt;
</code></pre>


blocks|key|2788408|text|应用到正文似乎摆脱了水平滚动条|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2788409|overflow-x:+hidden;|code-block|syntax|javascript|2788410|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Apply to the body seems to get rid of the horizontal scrollbar</p>

<pre><code>overflow-x: hidden;
</code></pre>


blocks|key|3000765|text|如果对某些人来说它仍然是实际的，我的解决方案如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3000766|.container{
++++overflow:+hidden;
++++overflow-y:+auto;
}|code-block|syntax|javascript|3000767|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If it still actual for someone, my solution was as follows:</p>

<pre><code>.container{
    overflow: hidden;
    overflow-y: auto;
}
</code></pre>


blocks|key|2787934|text|默认情况下，它已经是流动的。如果你想为较小的宽度而不是col-md-6的流体，使用col-sm-6或col-xs-6。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2787935|entityMap^0|R|8|15|8|1E|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>It's already fluid by default. If you want to be fluid for less width instead of <code>col-md-6</code> use <code>col-sm-6</code> or <code>col-xs-6</code>.</p>


blocks|key|178321|text|您可以在不干扰引导css的情况下修复此问题，并等待下一个版本中的修复，因此您可以通过定义自己的.container-fluid类并使用填充来简单地包装您的行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|178322|//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>+|code-block|syntax|javascript|178323|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can fix this problem without disturbing the bootstrap css and wait for a fix in the next version, so you can simply wrap your row by defining you own class .container-fluid with padding.</p>

<pre><code>//Add this class to your global css file
&lt;style&gt;
   .container-fluid {
       padding: 0 15px;  
   }
&lt;/style&gt;

   //Wrap your rows in within this .container-fluid 
   &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;content&lt;/div&gt;
          &lt;div class="col-md-9"&gt;content&lt;/div&gt;
          &lt;div class="col-md-3"&gt;content&lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt; 
</code></pre>


blocks|key|180915|text|如果所有的子元素都是行，那么可以在body元素的两侧添加一个10px的填充|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180916|body+{
++padding:+0+10px;
}|code-block|syntax|javascript|180917|如果您的HTML标记看起来像这样：|180918|<body>
++++<div+class="row"></div>
++++<div+class="row"></div>
++++<div+class="row"></div>
</body>|180919|这些行具有10px的负边距。这就是导致溢出的原因。如果你在正文中添加10px的填充，它们将相互抵消。|180920|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can add a 10px padding on the sides to your body element if all it's children are rows</p>

<pre><code>body {
  padding: 0 10px;
}
</code></pre>

<p>if your HTML markup looks something like this:</p>

<pre><code>&lt;body&gt;
    &lt;div class="row"&gt;&lt;/div&gt;
    &lt;div class="row"&gt;&lt;/div&gt;
    &lt;div class="row"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>The rows have a 10 px negative margin. That's what's causing the overflow. If you add 10px padding to the body, they will cancel each other out.</p>


blocks|key|2788435|text|唯一帮助我的是在我的html+DOM中最上面的<div+class="row">上设置了margin:0px。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2788436|这也不是解决问题的最有吸引力的方法，但因为它只在一个地方，所以我将其内联。|2788437|作为一个提示，容器-流体和明显的引导修复只在可见页面的两侧引入了增加的空格……:(尽管我通过阅读github问题的来回阅读找到了我的解决方案-非常值得一读。|2788438|entityMap^0|N|H|18|A|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<p>The only thing that assisted me was to set <code>margin:0px</code> on the topmost <code>&lt;div class="row"&gt;</code> in my html DOM. </p>

<p>This again wasn't the most appealing way to solve the issue, but as it is only in one place I put it inline. </p>

<p>As an fyi the container-fluid and apparent bootstrap fixes only introduced an increased whitespace on either side of the visible page... :( Although I came across my solution by reading through the back and forth on the github issue - so worthwhile reading.</p>


blocks|key|3000832|text|将最相关的评论总结为一个答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3000833|read+on)|3000834|it这是一个已知的错误，|unordered-list-item|offset|length|style|BOLD|3000835|
|3000836|有变通方法，但你可能不需要它们(read+on)|3000837|3000838|it发生在元素直接放在正文中，而不是放在+container-fluid+div或其他包含div的|3000839|3000840|中时)。将它们直接放入体内正是大多数人在本地测试东西时所做的事情。一旦你把你的代码放在完整的页面中(比如放在一个容器--流体或者另一个容器div中)，你就不会遇到这个问题了(不需要修改anything).|3000841|3000842|entityMap^0|0|0|0|C|0|0|0|O|0|0|0|K|L|S|0|0|0|2U|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@$G|10|H|11|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|13|8|@$G|14|H|15|I|J]]|9|@]|A|$]]|$1|O|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|P|3|Q|5|F|7|17|8|@$G|18|H|19|I|J]|$G|1A|H|1B|I|J]]|9|@]|A|$]]|$1|R|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1D|8|@$G|1E|H|1F|I|J]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|W|$]]

<p>Summarizing the most relevant comments in one answer:</p>

<ul>
<li>this is a known bug</li>
<li>there are workarounds but you might not need them (read on)</li>
<li><strong>it happens when elements are placed directly inside the body, rather than inside a <em>container-fluid</em> div or another containing div. Placing them directly in the body is exactly what most people do when testing stuff locally. Once you place your code in the complete page (so within a container-fluid or another container div) you will not face this problem (no need to change anything).</strong></li>
</ul>


<p>here is sample link: <a href="http://bootply.com/76369">http://bootply.com/76369</a></p>

<p>this is html i use.</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-6"&gt;.col-md-6&lt;/div&gt;
  &lt;div class="col-md-6"&gt;.col-md-6&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>bootstrap 3 has no container-fluid and row-fluid. </p>

<p>i cannot wrap it with .container class because it will become fixed layout.</p>

<p><strong>how to make it fluid</strong> (full page width) <strong>layout?</strong> (<strong>without horizontal scrollbar</strong>)</p>

<p>with these markup. when you view in the result the <strong>x-scroll</strong> bar is visible so you can scroll to left and right that it should not.</p>

<hr>

<p>edited: 2015-12-09<br>
Already got answer and Bootstrap already released the fix since 3.1.0</p>


How to make bootstrap 3 fluid layout without horizontal scrollbar

以下是示例链接：这是我使用的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没有容器流体和行流体。我不能用.container类包装它，因为它会变成固定的布局。how to make it fluid (full 

问如何在没有水平滚动条的情况下使bootstrap 3流畅布局
EN

回答 20

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在没有水平滚动条的情况下使bootstrap 3流畅布局EN

回答 20

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在没有水平滚动条的情况下使bootstrap 3流畅布局
EN