twitter-bootstrap - 在 Bootstrap3 中的较小设备上减少装订线（默认 30 像素）？

Question

在 bootstrap 3 中，装订线定义为 30px（每列各 15px）。我正在运行的问题是，例如，如果我将屏幕缩小到很小，排水沟最终会比列本身更宽，如下所示（深蓝色 = 列，浅蓝色 = 排水沟）。

您可以修改某些分辨率状态的装订线宽度吗？（手机、平板电脑等）

Answer 1

排水沟是由左右填充构成的，您可以使用媒体查询来根据您的屏幕尺寸进行更改：

/* 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;}
}

注意另请参阅此问题：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;
    }
}

Answer 2

一个更强大的解决方案，使用引导混合：

@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);
  }
}

Answer 3

使用 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;
    }
}

Answer 4

我使用标准（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";
}

Answer 5

我尝试重写 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);
    }
}