68

这是示例链接：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>

bootstrap 3 没有容器流体和行流体。

我不能用 .container 类包装它，因为它会变成固定布局。

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

使用这些标记。当您查看结果时，x 滚动条是可见的，因此您可以向左和向右滚动它不应该。

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

4

21 回答 21

57

我也有它，在等待他们修复它时，我添加了这个可耻的 css ：

body { overflow-x: hidden;}

这是一个可怕的选择，但它的工作。当他们解决问题时，我很乐意将其删除。

正如问题中所指出的，另一种选择是覆盖.row：

.row {
  margin-left: 0px;
  margin-right: 0px;
}
于 2013-08-27T09:31:42.760 回答
14

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

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

于 2014-02-13T09:26:31.567 回答
11

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

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

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

从文档...

“行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。”

引导程序 4

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

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

于 2013-08-23T09:29:52.900 回答
8

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

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

于 2013-08-29T03:14:32.973 回答
8

从 2014 年更新，来自 Bootstrap 文档：

网格和全宽布局 想要创建完全流畅的布局（意味着您的网站拉伸视口的整个宽度）的人们必须将他们的网格内容包装在一个包含填充的元素中：0 15px; 偏移边距：0 -15px；用于.rows。

于 2014-01-26T06:00:48.203 回答
5

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

body > .row {
    margin-left: 0px;
    margin-right: 0px;
}
于 2013-10-24T06:14:34.840 回答
3

我遇到了同样的问题（想要一个流畅的布局），但希望通过重新排列列等来保留响应选项以用于较小的屏幕，并最终对 variables.less 进行了小改动：

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

结果是超过 1200 像素的网格是流动的（没有水平滚动条）。低于此标准的响应规则适用。当然，您也可以轻松地将其设置为其他媒体查询。

如果您不想自己编辑和编译 .less ，您可以覆盖您自己的样式表中的 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>

希望这可以帮助！

于 2013-10-30T15:12:13.823 回答
2

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

你可以进一步参考——

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

于 2013-08-23T01:17:01.427 回答
2

这对我有用。在 FF、Chrome、IE11、IE10 中测试

.row {
    width:99.99%;
}
于 2014-04-28T13:45:36.670 回答
2

如果container-fluiddiv 直接放在body.

使用container-fluid结构的正确方法是：

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <!-- content goes here -->
            </div>
        </div>
    </section>
</body>

因此，尝试将您的container-fluidDIV 包装在外部 div 中，例如 a <div id="wrap">or a <section>or <article>or or <aside>or other special <div>，然后！没有水平滚动条。

于 2016-02-06T02:18:40.333 回答
1

在 Bootstrap 3 中，将列直接放在 body 下方应该会给你一个没有水平滚动条的流畅布局

<body>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</body>
于 2013-10-23T16:07:54.870 回答
1

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

首先，您需要自定义容器并将其设置为 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 上堆叠 container-full 和 container-fluid 类，稍后您可以使用 container-fluid。

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

于 2014-01-07T18:19:06.047 回答
1

找到了这个解决方法

.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;
}
于 2014-03-27T13:45:11.210 回答
1

这对我有用。我添加了一个内联样式以删除右侧的小边距。我真的不喜欢做内联样式，但是我的 html 中的这个单独的样式属性让我很容易记住拼接到我原本分离良好的代码中的 hack-job。它还消除了我在引导默认样式表之前或之后加载外部样式的担忧。

<div class="row" style="margin-right:0px;">
  <div class="col-md-6">
  <div class="col-md-6">
</div>
于 2015-01-15T21:14:15.670 回答
1

apply to body 似乎摆脱了水平滚动条

overflow-x: hidden;
于 2015-08-12T21:27:50.017 回答
1

如果它对某人来说仍然是实际的，我的解决方案如下：

.container{
    overflow: hidden;
    overflow-y: auto;
}
于 2015-12-08T22:38:27.267 回答
0

默认情况下它已经是流动的。如果您想以更小的宽度而不是col-md-6使用col-sm-6或col-xs-6.

于 2013-08-23T01:38:16.493 回答
0

您可以在不干扰引导 css 的情况下解决此问题并等待下一个版本中的修复，因此您可以通过定义您自己的带有填充的类 .container-fluid 来简单地包装您的行。

//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>
于 2014-05-09T07:30:58.020 回答
0

如果所有子元素都是行，则可以在 body 元素的侧面添加 10px 填充

body {
  padding: 0 10px;
}

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

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

这些行有 10 px 的负边距。这就是导致溢出的原因。如果你给 body 添加 10px 的 padding，它们会互相抵消。

于 2014-07-23T08:59:20.980 回答
0

唯一帮助我的是设置在我的 html DOMmargin:0px的最顶部。<div class="row">

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

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

于 2016-10-19T11:28:51.957 回答
0

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

  • 这是一个已知的错误
  • 有解决方法，但您可能不需要它们（继续阅读）
  • 当元素直接放置在主体内部而不是容器流体div 或另一个包含 div 的内部时，就会发生这种情况。将它们直接放入体内正是大多数人在本地测试东西时所做的。一旦您将代码放在完整的页面中（因此在容器流体或另一个容器 div 中），您将不会遇到此问题（无需更改任何内容）。
于 2017-01-10T01:46:56.757 回答