如何自定义bootstrap3 @grid-gutter width仅用于.col-xs-

Question

当在移动设备上渲染时，我希望有更薄的间隔。我在mixins.less中找到了这个，让我可以全局设置@grid-gutter-width。但是，当所有列都折叠而不破坏其他所有内容时，为col-xs- (移动设备)设置不同的间距宽度的最佳方法是什么？

// Grid System
// -----------

// Centered container element
.container-fixed() {
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  .clearfix();
}

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  .clearfix();
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage((@columns / @grid-columns));
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}

Answer 1

这里有一个很好的答案可以解决这个问题：Reduce the gutter (default 30px) on smaller devices in Bootstrap3?，即：

/* Extra-small devices (767px and below) */
@media (max-width: 767px) 
{ 
    div[class^="col-xs-"] {
        padding-left: 5px; 
        padding-right: 5px;
    }
}

当然，你可以用更少的代码来包装它。

Answer 2

如果要更改间距大小，则必须打开variable.less，然后查找

@grid-gutter-width:

并将其更改为所需的值。

提示：您还可以在variable.less中更改/编辑列数、容器宽度。