没有水平滚动问题的 Bootstrap 3.2 全角布局答案

【问题标题】：Bootstrap 3.2 full-width layout without horizontal scrolling issue没有水平滚动问题的 Bootstrap 3.2 全角布局
【发布时间】：2014-09-22 09:10:32
【问题描述】：

我还没有找到任何合适的解决方案来使用 Bootstrap 为我的内容获取真正的全角或全页布局。我尝试使用 .container-fluid 类，但侧面的填充仍然存在。从容器中删除填充会导致水平滚动问题，就像我尝试的许多其他方法一样。

我设置了一个小提琴来显示问题：

http://jsfiddle.net/YX4Q8/

<div class="container-fluid">
   <div class="row">
       <div class="col-xs-12">
           <div class="content">
               Content here
           </div>
       ...

【问题讨论】：

删除 .col-xs-12 上的填充而不是容器。
同意@entropic 看到这个小提琴：jsfiddle.net/YX4Q8/1
确实有效，谢谢。但是我的实际问题并没有解决。我修改了小提琴。如果我嵌套一行并在其中放置两个较小的列，我会遇到我正在谈论的水平滚动问题。见这里：jsfiddle.net/YX4Q8/2
然后删除.col-md-6 上的填充。
我在小提琴中试过了，水平滚动问题仍然存在

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

【解决方案1】：

演示：http://jsbin.com/hajey/1/edit

http://jsbin.com/hajey/1

我会为容器和目标创建一个特殊的类，这样你就不会影响其他列，这是没有特殊类的。

.content {
    background-color: #000000;
    height: 200px;
}

.col-xs-12 { padding: 0px }

.container-fluid { padding: 0 }

.container-fluid .row { margin: 0 }

.row .col-md-6 { padding: 0 }

@media (min-width:992px) { 
    .row .col-md-6:first-child { padding-right: 15px }

    .row .col-md-6:last-child { padding-left: 15px }
}

【讨论】：

有很多变化。如果我删除所有的填充和边距会有什么后果？它们的存在是出于我假设的原因。
所以我按照您的建议创建了自己的容器类。由于我只想丢失小屏幕上的填充，我使用媒体查询来应用您列出的属性。
.row margin 有负的左右边距来容纳 padding，如果你没有 padding，那么他们不会搞砸任何东西。