html - Bootstrap 3.2 全 Angular 布局没有水平滚动问题

Question

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

我设置了一个 fiddle 来显示问题:

http://jsfiddle.net/YX4Q8/

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

Answer 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 }
}