Bootstrap 3天沟尺寸 [英] Bootstrap 3 Gutter Size
问题描述
我才刚刚开始使用引导程序,并且不确定如何实现目标.
I've only just started working with bootstrap and unsure about how to achieve my goal.
我希望排水沟全部平整,就像这张图中的一样:
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.
推荐答案
尝试:
.row {
margin-left: 0;
margin-right: 0;
}
每列两边的填充均为15像素.造成30像素之间的装订线. 对于sm-grid,您的容器类将为970px((((940px + @ grid-gutter-width)))). 每列的宽度为940/12.两侧的结果@ grid-gutter-width/2 网格将被隐藏,负边距为-15px;.取消此负的左边距会在网格的两边设置30像素的装订线.该装订线是由列的15px填充+ 15 px的静止网格空间构成的.
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.
更新
针对@ElwoodP的回答,请考虑以下代码:
In response of the answer of @ElwoodP, consider the follow code:
<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
的边距不会破坏子网格.
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 .row
won't break the sub grid.
具有:
.row {
margin-left: 0;
margin-right: 0;
}
具有:
.container {
padding-left:30px;
padding-right:30px;
}
通知子网格不应包含在.container
类中.
Notice sub grids shouldn't wrapped inside a .container
class.
这篇关于Bootstrap 3天沟尺寸的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!