如何仅为.col-xs-自定义bootstrap3 @grid-gutter-width- [重复]答案

【问题标题】：How to customize bootstrap3 @grid-gutter-width for only .col-xs- [duplicate]如何仅为.col-xs-自定义bootstrap3 @grid-gutter-width- [重复]
【发布时间】：2014-03-19 20:11:27
【问题描述】：

我希望在移动设备上渲染时有更细的排水沟。我在mixins.less 中找到了这个，让我在全球范围内设置@grid-gutter-width。但是，当列全部折叠而不破坏其他所有内容时，为 ONLY 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);
}

【问题讨论】：

您将不得不自己编辑 XS mixins 以使用新的、单独的变量（而不是 @grid-gutter-width）。我们可能会在 Bootstrap v4 中添加每个网格层的排水沟宽度变量。
谢谢 - 至少我知道现在该做什么了。

标签： twitter-bootstrap-3 less

【解决方案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;
    }
}

当然，您可以将其封装在 LESS 中。

【讨论】：

【解决方案2】：

如果您想更改装订线大小，您必须打开variable.less，然后查找

@grid-gutter-width:
并将其更改为您想要的值。

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

【讨论】：

这将在全球范围内更改网格排水沟宽度，我的问题是仅更改 col-xs- 的排水沟宽度