Bootstrap 3天沟尺寸

Question

我刚刚开始使用bootstrap并且不确定如何实现我的目标.

我希望所有的阴沟都是平坦的,就像他们在这张图片中一样:

默认情况下,它们看起来像这样,列之间的垂直排水沟(标有蓝色)是水平和外部排水沟的两倍:

任何有关解决这个问题的最佳方法的帮助可能会受到赞赏.

Answer 1

尝试:

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

每列的两边都有15 px的填充.这使得30 px之间的排水沟.在sm-grid的情况下,容器类将为970px(((940px + @ grid-gutter-width))).每列的宽度为940/12.网格两侧产生的@ grid-gutter-width/2将隐藏,负边距为-15px;.撤消此负向左边距会在网格两侧设置30 px的装订线.这个排水沟采用15px填充柱+ 15 px静止网格空间构建.

更新

在回答@ElwoodP的答案时,请考虑以下代码:

<div class="container" style="background-color:darkblue;">  
<div class="row" style="background-color:yellow;">
  <div class="col-md-9" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-9</div>
    <div class="row" style="background-color:orange;">
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
    </div>
  </div>  
  <div class="col-md-3" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-3</div>
  </div>      
</div>
</div>

在嵌套的情况下,操纵.row类确实会影响子网格.好或错是取决于您对子网格的期望/要求.改变边距.row不会破坏子网格.

默认:

.row班级边缘

有:

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

填写.container班级

有:

.container {
    padding-left:30px;
    padding-right:30px;
}

注意子网格不应该包含在.container类中.

Answer 2

我不认为巴斯的答案是正确的.为什么触摸行边距？它们具有负边距以抵消行边缘上的列的列填充.搞乱这会破坏任何嵌套行.

答案很简单,只需使容器填充等于装订线尺寸:

例如,对于默认引导程序:

.container {
    padding-left:30px;
    padding-right:30px;
}

http://jsfiddle.net/3wBE3/61/

Answer 3

你可以保持默认行为(使用gutter)并在CSS样式表中添加一个类来完成像你这样的任务:

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

以下是如何在HTML中使用它:

<div class="row no-gutter">
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
</div>