Question

这是我使用的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类包装它，因为它将成为固定布局。

如何使其流畅（整页宽度）布局？（没有水平滚动条）

带有这些标记。当您在结果中查看时， x-scroll 栏可见，因此您可以向左和向右滚动它不应该。

编辑：2015-12-09
已经得到答案，Bootstrap已经发布了自3.1.0以来的修复程序

Answer 1

我也有它并且在等待它们修复它时，我添加了这个羞耻css：

body { overflow-x: hidden;}

这是一个可怕的选择，但它有效。我们很乐意在他们解决问题后将其删除。

正如issue所指出的另一种选择是覆盖.row：

.row {
  margin-left: 0px;
  margin-right: 0px;
}

Answer 2

这是在v3.1.0中引入的：http://getbootstrap.com/css/#grid-example-fluid

提交#62736046为全宽容器和布局添加了“.container-fluid变体”。

Answer 3

~~这是BS 3中的一个已知问题 - https://github.com/twbs/bootstrap/issues/9862?source=cc~~

~~我已经使用最新版本在Bootply上进行了测试，因此请继续关注GitHub以获取最新的更新/修复。~~

在Bootstrap 3中，必须在.row或.container内使用.container-fluid来抵消行上的负边距。 这将消除水平滚动条。

来自文档...

“行必须放在.container（固定宽度）或 .container-fluid（全宽）用于正确对齐和填充。“

Bootstrap 4

container＆gt; row＆gt; col关系的工作方式与3.x相同......

“容器是Bootstrap中最基本的布局元素使用我们的默认网格系统时需要“

Answer 4

如果我理解正确，在任何媒体查询后添加此选项会覆盖默认网格的宽度限制。在我需要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;
 }

然后，您可以将行和网格元素放在容器中。

Answer 5

2014年更新，来自Bootstrap docs：

网格和全宽布局人们希望创建完全流畅的布局（意味着您的网站会拉伸视口的整个宽度）必须使用 padding：0将其网格内容包装在包含元素中 15px; 以抵消.rows上使用的边距：0 -15px; 。

Answer 6

这里只需2美分。大多数情况下，这对你有用，就像它对我一样。

body > .row {
    margin-left: 0px;
    margin-right: 0px;
}

Answer 7

我遇到了同样的问题（想要一个流畅的布局），但是希望保留响应式选项，重新排列列等等，以适应较小的屏幕，最后只需对变量进行一些小改动。

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

此值在grid.less中使用一次并设置

@media (min-width: @screen-lg-desktop) {
  .container {
    max-width: @container-lg-desktop;
  }
  ....
}

结果是超过1200px的网格是流动的（没有水平滚动条）。在此之下，适用正常的响应规则。当然，您也可以轻松地将其设置为其他媒体查询。

如果您不想自己编辑和编译，可以将自己的样式表similair中的maxwidth覆盖到下面：

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

希望这有帮助！

Answer 8

在Twitter Bootstrap的最新版本中，默认情况下布局是流畅的，因此您不需要额外的类来将布局声明为流畅的。

您可以进一步参考 -

http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/

Answer 9

如果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>或其他专门{ {1}}和 presto！没有水平滚动条。

Answer 10

这对我有用。测试过FF，Chrome，IE11，IE10

.row {
    width:99.99%;
}

Answer 11

Bootstrap 3.0版本很棘手，他们会为此问题添加修复程序，并可能在Bootstrap 3.1中返回容器流体。但在此之前，这是我正在使用的修复程序：

首先，您需要自定义容器并将其设置为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;
}

您可以在根div上堆叠容器满和容器流体类，稍后您可以使用容器流体。

希望它有所帮助，如果您需要更多信息，请告诉我。

Answer 12

找到此解决方法

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

Answer 13

在Bootstrap 3中，将列直接放在正文下应该为您提供没有水平滚动条的流畅布局

<body>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</body>

Answer 14

这对我有用。我添加了一个内联样式来删除右边的小边距。我并不喜欢使用内联样式，但是我的html中的这个单独的样式属性使我很容易记住拼接到我的分离代码中的黑客作业。它还消除了在引导默认样式表之前或之后加载外部样式的顾虑。

<div class="row" style="margin-right:0px;">
  <div class="col-md-6">
  <div class="col-md-6">
</div>

Answer 15

适用于身体似乎摆脱了水平滚动条

overflow-x: hidden;

Answer 16

如果某人仍然存在，我的解决方案如下：

.container{
    overflow: hidden;
    overflow-y: auto;
}

Answer 17

唯一帮助我的是在我的html DOM中的margin:0px上设置<div class="row">。

这也不是解决问题的最有吸引力的方法，但因为它只在一个地方我把它内联。

作为一个容器流体和明显的引导程序修复只引入了可见页面两侧增加的空白...... :(虽然我通过在github问题上来回阅读我的解决方案 - 所以值得一读。

Answer 18

在一个答案中总结最相关的评论：

这是一个已知的错误
有解决方法，但您可能不需要它们（请继续阅读）
当元素直接放在body中，而不是在 container-fluid div或另一个包含div的内部时，会发生这种情况。将它们直接放在体内正是大多数人在本地测试时所做的事情。将代码放入完整页面后（在容器流体或其他容器div中），您将不会遇到此问题（无需更改任何内容）。

Answer 19

如果你的身体所有孩子都是行，你可以在身体侧面添加一个10px的填充

body {
  padding: 0 10px;
}

如果你的HTML标记看起来像这样：

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

行的负余量为10 px。这就是造成溢出的原因。如果你向身体添加10px填充，它们将相互抵消。

Answer 20

你可以解决这个问题而不会干扰bootstrap css并等待下一个版本的修复，所以你可以通过定义你自己的类.container-fluid with padding来简单地包装你的行。

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

Answer 21

默认情况下它已经流畅了。如果您想要使用col-md-6或col-sm-6而不是col-xs-6而使用{{1}}来减少宽度。

如何在没有水平滚动条的情况下制作bootstrap 3流体布局

21 个答案: