使用 LESS 变量的最大网格列数是多少？

Question

我想知道，variables.less 中可以设置多少（最大数量）列？ 如果有人能告诉我引导网格混合是如何工作的，那就太好了。我的意思是，如何在 LESS 编译后创建不同数量的 .col-[size]-[count] 类，没有循环（LESS 中没有循环，对吗？）

Answer 1

你有两个选择：

• （基础定制）在线使用定制器http://getbootstrap.com/customize/#less-variables
• （高级自定义）在项目中编辑 variables.less 并重新编译

我们来谈谈手动定制。

您可以在variables.less中更改网格数

//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:              12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

没有最大数量。唯一需要注意的是您有装订线宽度，例如，如果您将列加倍（24 而非 12 列），则装订线的一半大小（15 像素而不是 30 像素）是有意义的

您还可以访问媒体查询变量，例如，您可以在此处设置更大的屏幕尺寸：

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

...

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

// Xtra-Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-xl:                  1600px;
@screen-xl-min:              @screen-xl;
//** Deprecated `@screen-xl-desktop` as of v3.0.1
@screen-xl-desktop:          @screen-xl-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);
@screen-lg-max:              (@screen-xl-min - 1);

然后您还必须设置 .container 大小，它始终是您的视口大小减去装订线大小（页面左侧和右侧）的 2 倍。
使用标准 30 像素的装订线宽度，这个数字将是 60 像素。 例如，我们创建的超大视口（宽度为 1600 像素）的 .container 将为 1600 像素 - 60 像素 = 1540 像素。

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

...

// Large screen / wide desktop
@container-large-desktop:      ((1140px + @grid-gutter-width));
//** For `@screen-lg-min` and up.
@container-lg:                 @container-large-desktop;

// Extra-Large screen / wide desktop
@container-xtra-large:      ((1540px + @grid-gutter-width));
//** For `@screen-xl-min` and up.
@container-xl:                 @container-xtra-large;

最后一步是为我们刚刚设置的这个新的超大视口生成新的网格，因此您需要编辑grids.less

//
// Grid system
// --------------------------------------------------


// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  .container-fixed();

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-xl-min) {
    width: @container-xl;
  }
}

....

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}

// Xtra-Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-xl-min) {
  .make-grid(xl);
}