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

当然，你可以把它包装成LESS。

Answer 2

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

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

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

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

2 个答案: