减少Bootstrap3中较小设备上的装订线(默认为30px)？

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

一个更强大的解决方案,使用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);
  }
}