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

Question

这里是示例链接: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以来的修复程序

Answer 1

我也有它,在等待他们解决它时,我添加了这个羞耻css:

body { overflow-x: hidden;}

这是一个可怕的选择,但它的工作.我们很乐意在他们解决问题后将其删除.

如该问题所指出的另一种选择是覆盖.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必须在a内使用.container或.container-fluid抵消行上的负边距.这将消除水平滚动条.

来自文档......

"行必须放在.container(固定宽度)或.container-fluid(全宽)内,以便正确对齐和填充."

Bootstrap 4

该container> row> 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

来自Bootstrap docs的2014年更新:

网格和全宽布局想要创建完全流畅布局的人(意味着您的网站会拉伸视口的整个宽度)必须将其网格内容包装在包含填充的元素中:0 15px; 抵消保证金:0 -15px; 用于.rows.

Answer 6

这是我的2美分.大多数情况下,这对你有用,就像它对我一样.

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