我才刚刚开始使用引导程序并且不确定如何实现我的目标。
我希望所有的排水沟都是均匀的，就像他们在这张图片中一样：
默认情况下，它们看起来像这样，列之间的垂直排水沟（用蓝色标记）是水平排水沟和外部排水沟的两倍：
任何有关解决此问题的最佳方法的帮助可能都会受到赞赏。
问问题
106672 次
10 回答
19
尝试：
.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类中。
于 2013-09-27T06:45:11.097 回答
11
您可以保留默认行为（带装订线）并为您的 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>
于 2015-05-04T10:04:35.063 回答
10
我不认为巴斯的回答是正确的。为什么要触摸行边距？它们有一个负边距来抵消行边缘列的列填充。搞砸这个会破坏任何嵌套的行。
答案很简单，只要让容器内边距等于装订线大小：
例如对于默认引导：
.container {
padding-left:30px;
padding-right:30px;
}
于 2014-03-11T14:50:45.923 回答
4
将这些辅助类添加到 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>
于 2015-12-25T16:26:00.193 回答
3
我一直被这个问题困扰，我的解决方案是创建一个 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上提到的这个问题，我相信它解决了同样的问题。
解决方案：2）
另一种解决方案是简单地创建您的自定义 CSS 类
.small-gutters {
margin-right: -10px;
margin-left: -10px;
> [class*="col-"] {
padding-right: 10px;
padding-left: 10px;
}
}
希望有帮助！
于 2017-10-24T16:11:49.433 回答
2
面对这个问题，我在我的 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;
}
这会覆盖默认的引导样式，并使左侧和右侧以及装订线宽度相等。
于 2014-10-16T12:07:26.280 回答
0
@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排水沟和外边距。
于 2017-10-31T04:29:37.647 回答
0
如果您在自己的项目中使用 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 像素。我发现这是调整排水沟大小的最干净的方法。
于 2017-11-29T10:10:44.107 回答
0
row-no-gutters在 v3.4.0 中引入的 Bootstrap 3
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
您可以制作一排没有排水沟的排，并在其中放置一排带有排水沟的部分，用于您想要有排水沟的部分。
于 2019-03-08T13:48:50.960 回答
0
我在这里尝试了几个选项。对于我尝试的所有方法，间距是不均匀的，或者是均匀的，但是当我将窗口宽度缩小到足以让子视图堆叠时，堆叠的视图之间没有空间。
这对我有用。
.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>
于 2020-02-15T16:01:52.583 回答