Bootstrap 3 装订线尺寸

Question

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

我希望所有的排水沟都是平的，就像他们在这张图片中一样：

默认情况下，它们看起来像这样，列之间的垂直排水沟（用蓝色标记）是水平排水沟和外部排水沟的两倍：

任何有关解决此问题的最佳方法的帮助可能都会受到赞赏。

Answer 1

尝试：

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

每列的两边都有 15 像素的填充。这使得排水沟介于 30 像素之间。 在 sm-grid 的情况下，您的容器类将为 970px (((940px + @grid-gutter-width)))。 每列的宽度为 940/12。生成的 @grid-gutter-width/2 在两侧 网格将被隐藏，负边距为 - 15px；。撤消这个负左边距会在网格的两侧设置 30 px 的装订线。这个排水沟是用 15 像素的列填充 + 15 像素的静止网格空间构建的。

更新

针对@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 样式表中添加了以下内容：

#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 4

您可以保留默认行为（带装订线），并为您的 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 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 试图反过来回答这个问题——让外边距与排水沟的大小相同。 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，则可以通过将 sass 变量从 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;

现在您的间距将是 50 像素而不是 30 像素。我发现这是调整排水沟大小的最干净的方法。

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>