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

您可以保留默认行为（使用装订线），并为您的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>

Answer 4

面对这个问题，我在我的css样式表中添加了以下内容：

#mainContent .container {
    padding-left:16px;
    padding-right:16px;
}
  #mainContent .row {
    margin-left: -8px;
    margin-right: -8px;
}

  #mainContent .col-xs-1, #mainContent .col-sm-1, #mainContent .col-md-1, #mainContent .col-lg-1, #mainContent .col-xs-2, #mainContent .col-sm-2, #mainContent .col-md-2, #mainContent .col-lg-2, #mainContent .col-xs-3, #mainContent .col-sm-3, #mainContent .col-md-3, #mainContent .col-lg-3, #mainContent .col-xs-4, #mainContent .col-sm-4, #mainContent .col-md-4, #mainContent .col-lg-4, #mainContent .col-xs-5, #mainContent .col-sm-5, #mainContent .col-md-5, #mainContent .col-lg-5, #mainContent .col-xs-6, #mainContent .col-sm-6, #mainContent .col-md-6, #mainContent .col-lg-6, #mainContent .col-xs-7, #mainContent .col-sm-7, #mainContent .col-md-7, #mainContent .col-lg-7, #mainContent .col-xs-8, #mainContent .col-sm-8, #mainContent .col-md-8, #mainContent .col-lg-8, #mainContent .col-xs-9, #mainContent .col-sm-9, #mainContent .col-md-9, #mainContent .col-lg-9, #mainContent .col-xs-10, #mainContent .col-sm-10, #mainContent .col-md-10, #mainContent .col-lg-10, #mainContent .col-xs-11, #mainContent .col-sm-11, #mainContent .col-md-11, #mainContent .col-lg-11, #mainContent .col-xs-12, #mainContent .col-sm-12, #mainContent .col-md-12, #mainContent .col-lg-12 
{
    padding-left: 8px;
    padding-right: 8px;
}

这会覆盖默认的引导样式，并使左右两侧和装订线的宽度相等。

Answer 5

将这些辅助类添加到stylesheet.less （您可以使用http://less2css.org/将它们编译为CSS）

.row.gutter-0 {
    margin-left: 0;
    margin-right: 0;
    [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

.row.gutter-10 {
    margin-left: -5px;
    margin-right: -5px;
    [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.row.gutter-20 {
    margin-left: -10px;
    margin-right: -10px;
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

以下是您在HTML中使用它的方法：

<div class="row gutter-0">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row gutter-10">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row gutter-20">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

Answer 6

我一直坚持这个问题，我的解决方案是创建一个mixin，它允许我在SCSS中指定我想要的实际装订线尺寸......

解决方案：1）

@mixin add-gutter($size) {
    margin-right: -$size;
    margin-left: -$size;

    > [class*="col-"] {
        padding-right: $size;
        padding-left: $size;
    }
}



.that-special-row{
    @include add-gutter(7px);
}

并使用它......

<div class="row that-special-row"></div>

实际的解决方案来自github上提到的this issue，我认为这解决了同样的问题。

解决方案：2）

另一种解决方案，就是创建自定义CSS 类

.small-gutters {
    margin-right: -10px;
    margin-left: -10px;
    > [class*="col-"] {
      padding-right: 10px;
      padding-left: 10px;
    }
  }

希望有所帮助！

Answer 7

@Bass Jobsen和@ElwoodP试图反过来回答这个问题 - 给予外边距与排水沟相同的DOUBLE尺寸。 OP（和我一样）正在寻找一种在所有地方都有一个单一尺寸排水沟的方法。以下是正确的CSS调整：

.row {
    margin-left: -7px;
    margin-right: -7px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 7px;
    padding-right: 7px;
}
.container {
    padding-left: 14px;
    padding-right: 14px;
}

这会在所有地方留下14px阴沟和外边距。

Answer 8

如果你在自己的项目中使用sass，你可以通过将sunst变量从bootstrap的_variables.scss文件复制粘贴到你自己的项目sass文件中来覆盖默认的bootstrap gutter大小，例如：

// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-gutter-width-base:     50px !default;
$grid-gutter-widths: (
        xs: $grid-gutter-width-base,
        sm: $grid-gutter-width-base,
        md: $grid-gutter-width-base,
        lg: $grid-gutter-width-base,
        xl: $grid-gutter-width-base
) !default;

现在你的排水沟将是50px而不是30px。我发现这是调整装订线尺寸的最干净的方法。

Answer 9

Bootstrap 3在v3.4.0中引入了row-no-gutters

https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters

您可以排成一排不带檐槽的地方，并在其中排成一排的排水沟。

Answer 10

我在这里尝试了几种选择。对于我尝试过的所有操作，间距是不均匀的，甚至是均匀的，但是当我缩小窗口宽度足以将子视图堆叠时，堆叠的视图之间就没有空间了。

这是对我有用的。

.col-sm-12 { 
  margin-bottom: 2em;
}

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="col-sm-12">

            </div>
        </div>
        <div class="col-sm-6">
            <div class="col-sm-12">

            </div>
        </div>
    </div>
</div>