twitter-bootstrap 在 Bootstrap3 中减少较小设备上的装订线（默认 30px）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19164377/
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
Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
提问by Bass Jobsen
In bootstrap 3 the gutter is defined as 30px (15px on each side of a column). The issue I'm running is that, for example if I shrink my screen down to be tiny, the gutters end up being wider than the columns themselves, as seen below (darker blue = column, lighter blue = gutter).
在引导程序 3 中，装订线被定义为 30 像素（列的每一侧为 15 像素）。我正在运行的问题是，例如，如果我将屏幕缩小到很小，那么排水沟最终会比列本身更宽，如下所示（深蓝色 = 列，浅蓝色 = 排水沟）。
Can you modify the gutter width of certain resolution states? (mobile, tablet, etc)
您可以修改某些分辨率状态的装订线宽度吗？（手机、平板电脑等）
回答by Bass Jobsen
The gutter is construct by a left and right padding, you could use media queries to change this depending on your screen size:
装订线由左右填充构成，您可以使用媒体查询根据屏幕尺寸进行更改：
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px)
{
div[class^="col"]{padding-left:5px; padding-right:5px;}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px)
{
div[class^="col"]{padding-left:10px; padding-right:10px;}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
{
/*default so you don't need this*/
div[class^="col"]{padding-left:15px; padding-right:15px;}
}
Note see also this question: Bootstrap 3 Gutter Size. You should use this when you also want to change the 'visual' gutter on both side of the grid. In this case you will also have to set the padding of the .container class to your gutter size. b.e.
请注意，另请参阅此问题：Bootstrap 3 Gutter Size。当您还想更改网格两侧的“视觉”装订线时，您应该使用它。在这种情况下，您还必须将 .container 类的填充设置为您的装订线大小。是
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
{
/*default so you don't need this*/
div[class^="col"]{padding-left:85px; padding-right:85px;}
.container{padding-left:85px; padding-right:85px;}
.row {
margin-left: 0;
margin-right: 0;
}
}
回答by alberto-bottarini
A more robust solution, using bootstrap mixins:
一个更强大的解决方案，使用引导混合：
@sm-gutter: 10px;
@md-gutter: 50px;
@lg-gutter: 100px;
.my-container {
@media (min-width: @screen-sm-min) {
width: @container-sm;
.container-fixed(@gutter: @sm-gutter);
}
@media (min-width: @screen-md-min) {
width: @container-md;
.container-fixed(@gutter: @md-gutter);
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
.container-fixed(@gutter: @lg-gutter);
}
}
.my-row {
@media (min-width: @screen-sm-min) {
.make-row(@gutter: @sm-gutter);
}
@media (min-width: @screen-md-min) {
.make-row(@gutter: @md-gutter);
}
@media (min-width: @screen-lg-min) {
.make-row(@gutter: @lg-gutter);
}
}
.my-4-col {
@media (min-width: @screen-sm-min) {
.make-sm-column(4, @sm-gutter);
}
@media (min-width: @screen-md-min) {
.make-md-column(4, @md-gutter);
}
@media (min-width: @screen-lg-min) {
.make-lg-column(4, @lg-gutter);
}
}
回答by jhvaras
Simple solution using the LESS mixin and "col" class:
使用 LESS mixin 和 "col" 类的简单解决方案：
.reduce-gutter(@size: 5px) {
.row {
.make-row(@size);
}
.row .col:first-child,
.row .col:last-child {
padding-right: @size;
padding-left: @size;
}
}
回答by Julien
I use standard (30px) gutter size except on small devices where my gutter is 6px :
我使用标准 (30px) 装订线大小，但在我的装订线为 6px 的小型设备上除外：
@media (max-width: $screen-sm-min - 1) {
$grid-gutter-width: 6px; // redefining
// also redefine $navbar-padding-horizontal in the scope because it depend on $grid-gutter-width
$navbar-padding-horizontal: floor(($grid-gutter-width / 2));
@import "../bootstrap/bootstrap/forms";
@import "../bootstrap/bootstrap/grid";
@import "../bootstrap/bootstrap/navbar";
}
回答by Alex
I tried to rewrite Bootstrap mixin in order to have half of the normal grid-gutter for the XS width. Seems work fine.
我试图重写 Bootstrap mixin，以便为 XS 宽度使用一半的正常网格装订线。似乎工作正常。
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
@media(max-width: @screen-xs-min) {
padding-left: (@gutter / 4);
padding-right: (@gutter / 4);
};
}
.make-row(@gutter: @grid-gutter-width) {
@media(max-width: @screen-xs-min) {
margin-left: (@gutter / -4);
margin-right: (@gutter / -4);
}
}
.container-fixed() {
@media(max-width: @screen-xs-min) {
padding-left: (@grid-gutter-width / 4);
padding-right: (@grid-gutter-width / 4);
}
}
