Twitter bootstrap 3 如何仅为.col xs自定义bootstrap3@网格槽宽度-

我希望在移动设备上渲染时使用更薄的水槽。我在mixins.less中找到了这一点，以便全局设置@grid gutter width。但是，当柱全部折叠而不破坏其他所有内容时，为仅X列移动设备设置不同槽宽度的最佳方法是什么

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

---

如果要更改檐槽大小，必须打开变量.less并查找

@格线槽宽度： 并将其更改为所需的值

小贴士:

---

您还可以更改/编辑变量中的列数、容器宽度。less。

这里有一个很好的答案可以解决这个问题： i、 e:

---

当然，您可能需要用更少的代码来包装它。

您必须自己编辑XS mixin，以使用新的单独变量，而不是@grid gotter width。我们可能会在Bootstrap v4中添加每个网格层的边沟宽度变量。谢谢-至少我现在知道该怎么做了。这将在全局范围内更改网格边沟宽度，我的问题是只更改X列的边沟宽度-

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