twitter-bootstrap Bootstrap 3 装订线尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19041733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Gutter Size
提问by Billy
I've only just started working with bootstrap and unsure about how to achieve my goal.
我刚刚开始使用 bootstrap，不确定如何实现我的目标。
I would like the gutters to all be even, like they are in this image:
我希望排水沟都是均匀的，就像他们在这张图片中一样：
by default, they look like this, the vertical gutters in between columns (marked with blue) are double the horizontal and outside gutters:
默认情况下，它们看起来像这样，列之间的垂直边沟（用蓝色标记）是水平边沟和外部边沟的两倍：
Any help on the best way to solve this probably would be appreciated.
任何有关解决此问题的最佳方法的帮助都将不胜感激。
采纳答案by Bass Jobsen
try:
尝试：
.row {
margin-left: 0;
margin-right: 0;
}
Every column have a padding of 15 px on both sides. Which makes a gutter between of 30 px. In the case of the sm-grid your container class will 970px (((940px + @grid-gutter-width))). Every column get a width of 940/12. The resulting @grid-gutter-width/2 on both sides of the grid will be hide with a negative margin of - 15px;. Undoing this negative left-margin set a gutter of 30 px on both sides of the grid. This gutter is build with 15px padding of the column + 15 px resting grid space.
每列的两侧都有 15 px 的填充。这使得 30 像素之间的排水沟。在 sm-grid 的情况下，您的容器类将为 970px (((940px + @grid-gutter-width)))。每列的宽度为 940/12。生成的网格两侧的 @grid-gutter-width/2 将被隐藏，负边距为 - 15px;。撤消此负左边距会在网格两侧设置 30 像素的间距。这个排水沟是用列的 15px 填充 + 15 px 休息网格空间构建的。
update
更新
In response of the answer of @ElwoodP, consider the follow code:
针对@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>
In the case of nesting, manipulation the .row class indeed influences the sub grid. Good or fault depends on your expectations / requirements for the subgrid. Changing the margin of the .rowwon't break the sub grid.
在嵌套的情况下，操作 .row 类确实会影响子网格。好坏取决于您对子电网的期望/要求。更改边距.row不会破坏子网格。
default:
默认：
margin of the .rowclass
.row班级余量
with:
和：
.row {
margin-left: 0;
margin-right: 0;
}
padding of the .containerclass
.container类的填充
with:
和：
.container {
padding-left:30px;
padding-right:30px;
}
Notice sub grids shouldn't wrapped inside a .containerclass.
注意子网格不应该包含在一个.container类中。
回答by ElwoodP
I don't think Bass's answer is correct. Why touch the row margins? They have a negative margin to offset the column padding for the columns on the edge of the row. Messing with this will break any nested rows.
我不认为巴斯的回答是正确的。为什么要触摸行边距？它们有一个负边距来抵消行边缘列的列填充。弄乱这个会破坏任何嵌套的行。
The answer is simple, just make the container padding equal to the gutter size:
答案很简单，只需使容器填充等于装订线大小：
e.g for default bootstrap:
例如对于默认引导程序：
.container {
padding-left:30px;
padding-right:30px;
}
回答by Zod
You can keep the default behaviour (with gutter) and add a class to your CSS stylesheet for tasks like yours:
您可以保留默认行为（使用装订线）并为您的 CSS 样式表添加一个类以执行您的任务：
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
And here's how you can use it in your HTML:
以下是在 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>
回答by Mohammad Dayeh
Add these helper classes to the stylesheet.less (you can use http://less2css.org/to compile them to CSS )
将这些辅助类添加到 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;
}
}
And here's how you can use it in your HTML:
以下是在 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>
回答by etiennejcharles
I've been stuck with this problem, my solution was creating a mixin which allows me to specify in SCSS, the actual gutter size I want ...
我一直被这个问题困扰，我的解决方案是创建一个 mixin，它允许我在 SCSS 中指定我想要的实际装订线大小......
Solution: 1)
解决方案：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);
}
And to use it...
并使用它...
<div class="row that-special-row"></div>
The actual solution came about from this issuementionned on github, which I believe addresses the same problem.
实际的解决方案来自github上提到的这个问题，我相信它解决了同样的问题。
Solution: 2)
解决方案：2）
Another solution, would be simply to create your custom CSS class
另一种解决方案是简单地创建您的自定义 CSS 类
.small-gutters {
margin-right: -10px;
margin-left: -10px;
> [class*="col-"] {
padding-right: 10px;
padding-left: 10px;
}
}
Hope that helps!
希望有帮助！
回答by user1158039
Facing this problem, I made the following addition to my css stylesheet:
面对这个问题，我在我的 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;
}
This overrides the default bootstrap styling and makes the left and right sides and the gutter equal width.
这会覆盖默认的引导程序样式并使左右两侧和装订线的宽度相等。
回答by Michael Yaeger
@Bass Jobsen and @ElwoodP attempted to answer this question in reverse--giving the outer margins the same DOUBLE size as the gutters. The OP (and me, as well) was searching for a way to have a SINGLE size gutter in all places. Here are the correct CSS adjustments to do so:
@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;
}
This leaves a 14pxgutter and outside margin in all places.
这会14px在所有地方留下排水沟和外边距。
回答by user33560
If you use sass in your own project, you can override the default bootstrap gutter size by copy pasting the sass variables from bootstrap's _variables.scss file into your own projects sass file somewhere, like:
如果您在自己的项目中使用 sass，则可以通过将 sass 变量从 bootstrap 的 _variables.scss 文件复制粘贴到您自己的项目 sass 文件中的某处来覆盖默认引导间距大小，例如：
// 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;
Now your gutters will be 50px instead of 30px. I find this to be the cleanest method to adjust the gutter size.
现在您的排水沟将是 50 像素而不是 30 像素。我发现这是调整排水沟大小的最干净的方法。
回答by dyve
Bootstrap 3 introduced row-no-guttersin v3.4.0
Bootstrap 3row-no-gutters在 v3.4.0 中引入
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
You could make a row without gutters, and have a row with gutters inside it for the parts you do want to have a gutter.
您可以在没有排水沟的情况下制作一排，并在其中放置一排带有排水沟的部分，用于您确实想要有排水沟的部分。
回答by ScottyBlades
I tried several of the options here. For all that I tried, the spacing was uneven, or was even but when I shrank the window width enough for the subviews to stack, there was no space between stacked views.
我在这里尝试了几个选项。对于我尝试的所有操作，间距是不均匀的，或者是均匀的，但是当我将窗口宽度缩小到足以让子视图堆叠时，堆叠视图之间没有空间。
Here is what worked for me.
这对我有用。
.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>
