Bootstrap 3 - 减少装订线尺寸
Bootstrap 3 - reducing gutter size
我要实现的是:
虽然到目前为止它看起来像这样(下边距不是问题,但我决定它们应该更小):
不幸的是,装订线大小是基于在图像中标记为灰色部分的填充。我希望每个部分都具有相同的大小:15 px。
我指的代码部分是(其中 groups-margin 设置每个按钮的底部边距):
<div class="row">
<div class="col-sm-6 groups-margin">
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a>
</div>
<div class="col-sm-6 groups-margin">
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a>
</div>
</div>
用 div 包裹你的 col-sm-6
,这样说 .input-row
:
<div class="row">
<div class="input-row">
<div class="col-sm-6 groups-margin">
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a>
</div>
<div class="col-sm-6 groups-margin">
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a>
</div>
</div>
</div>
既然您正在使用 col-sm-
,请在媒体查询中添加这些属性,如下所示:
@media (min-width: 768px){
.input-row .col-sm-6:first-child{padding-right:7.5px;}
.input-row .col-sm-6:last-child{padding-left:7.5px;}
}
现在所有的间距(左、右、中将为 15px)
这是一个包含上述代码的 jsfiddle:http://jsfiddle.net/AndrewL32/65sf2f66/47/
如果您只想增加那个部分的装订线尺寸,您可以为它制作一个 class。
.btn .gutter{
margin-bottom: 5px;
}
您可以使用 classes
添加装订线
<a class="btn btn-primary btn-md gutter">some button</a>
我喜欢创建更具体的行 类,让 Bootstrap 保持原样。所以我可能有这样的东西:
.row-half-gutter {
margin-right: (@grid-gutter-width / 2) * -1;
margin-left: (@grid-gutter-width / 2) * -1;
> [class*="col-"] {
padding-right: (@grid-gutter-width / 4);
padding-left: (@grid-gutter-width / 4);
}
}
.row-no-gutter {
margin-right: 0;
margin-left: 0;
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
我要实现的是:
虽然到目前为止它看起来像这样(下边距不是问题,但我决定它们应该更小):
不幸的是,装订线大小是基于在图像中标记为灰色部分的填充。我希望每个部分都具有相同的大小:15 px。
我指的代码部分是(其中 groups-margin 设置每个按钮的底部边距):
<div class="row">
<div class="col-sm-6 groups-margin">
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a>
</div>
<div class="col-sm-6 groups-margin">
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a>
</div>
</div>
用 div 包裹你的 col-sm-6
,这样说 .input-row
:
<div class="row">
<div class="input-row">
<div class="col-sm-6 groups-margin">
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a>
</div>
<div class="col-sm-6 groups-margin">
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a>
<a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a>
</div>
</div>
</div>
既然您正在使用 col-sm-
,请在媒体查询中添加这些属性,如下所示:
@media (min-width: 768px){
.input-row .col-sm-6:first-child{padding-right:7.5px;}
.input-row .col-sm-6:last-child{padding-left:7.5px;}
}
现在所有的间距(左、右、中将为 15px)
这是一个包含上述代码的 jsfiddle:http://jsfiddle.net/AndrewL32/65sf2f66/47/
如果您只想增加那个部分的装订线尺寸,您可以为它制作一个 class。
.btn .gutter{
margin-bottom: 5px;
}
您可以使用 classes
添加装订线 <a class="btn btn-primary btn-md gutter">some button</a>
我喜欢创建更具体的行 类,让 Bootstrap 保持原样。所以我可能有这样的东西:
.row-half-gutter {
margin-right: (@grid-gutter-width / 2) * -1;
margin-left: (@grid-gutter-width / 2) * -1;
> [class*="col-"] {
padding-right: (@grid-gutter-width / 4);
padding-left: (@grid-gutter-width / 4);
}
}
.row-no-gutter {
margin-right: 0;
margin-left: 0;
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}