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

【问题标题】：How to make bootstrap 3 fluid layout without horizontal scrollbar如何在没有水平滚动条的情况下制作 bootstrap 3 流畅布局
【发布时间】：2013-08-25 21:27:21
【问题描述】：

这里是示例链接：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-scroll 栏是可见的，因此您可以向左和向右滚动它不应该的。

编辑于：2015-12-09
自 3.1.0 起，Bootstrap 已经得到了答案

【问题讨论】：

滚动条似乎是 bootply 的副作用。在使用 cssdeck 和我自己的网站时，没有出现滚动条。您可以单击“监视器”图标，然后在弹出窗口中看到没有滚动条。
andyjarrett.co.uk/blog/index.cfm/2013/8/2/…
Read the fine manual.
滚动条不是bootplay的效果。它甚至出现在我的本地主机上。在 cssdeck 没有引导程序 3 它只有引导程序 2

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

你可以进一步参考——

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

【讨论】：

是的，我知道它已经很流畅了，但是它有水平滚动条，这是不对的。
是的，会弹出水平滚动条。

【解决方案2】：

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

【讨论】：

是的，我知道它已经很流畅了，但是它有水平滚动条，这是不对的。
水平滚动条？你的代码看起来很糟糕。如果可以，请发布小提琴，我们将能够为您提供帮助。您是否将主要代码放入容器中？
什么是坏的？正如文件描述的那样，每件事都是正确的。只需将该 html 粘贴到包含 bootstrap 3 css 的 .html 文件即可。它应该显示整页网格布局。就是这样。
我没有看到水平滚动条。

【解决方案3】：

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

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

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

来自文档...

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

引导程序 4

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

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

【讨论】：

该问题已重新打开。
因此，在解决此问题之前，您只需添加自己的<div class="container-fluid">（或您想要的任何名称）并给它margin-left: 15px; margin-right: 15px; 以抵消row 的负边距。
padding: 0 15px; 是 Bootstrap 文档中提供的指南：getbootstrap.com/css/#grid-intro
文档中提供的指导无效，但 davidpauljunior 的建议有效！

【解决方案4】：

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

body { overflow-x: hidden;}

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

正如issue 中指出的那样，另一种选择是覆盖.row：

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

【讨论】：

或者像@davidpauljunior建议的那样将以下内容添加到您的容器div（放置.row）中：填充：0 15px；左边距：0px；右边距：0px;
设置.row左右边距为“0”，会导致div边缘模糊。所以我最好使用body { overflow-x: hidden; }并调整padding。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

提供边距以抵消给予 .col-* 类的填充。添加这个 sn-p 会使边距变回来。如果您想再次删除边距，可以添加： .container-full .row > * { padding: 0px; }

【解决方案8】：

我遇到了同样的问题（想要流畅的布局），但希望通过重新排列列等来保留响应选项以用于较小的屏幕，最后对 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>

希望这会有所帮助！

【讨论】：

【解决方案9】：

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。

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

【讨论】：

【解决方案10】：

2014 年更新，来自 Bootstrap 文档：

网格和全宽布局希望创建完全流畅的用户布局（意味着您的网站延伸了视口的整个宽度）必须用 padding: 0 将它们的网格内容包装在包含元素中 15px; 以抵消 margin: 0 -15px; 用于 .rows。

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案13】：

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

.row {
    width:99.99%;
}

【讨论】：

【解决方案14】：

您可以在不干扰引导 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>

【讨论】：

【解决方案15】：

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

body {
  padding: 0 10px;
}

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

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

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

【讨论】：

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

应用到body似乎摆脱了水平滚动条

overflow-x: hidden;

【讨论】：

【解决方案18】：

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

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

【讨论】：

【解决方案19】：

如果将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！没有水平滚动条。

【讨论】：

【解决方案20】：

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

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

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

【讨论】：

【解决方案21】：

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

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

【讨论】：