Question

我想知道，在变量中可以设置多少（最大数量）列。如果有人能告诉我bootstrap grid mixin是如何工作的，那就太好了。我的意思是，在编译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），那么将沟槽设置为半尺寸（15px而不是30px）是有意义的

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

//== 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倍（页面的左侧和右侧）。
使用标准的30px天沟宽度，此数字将为60px。例如，我们创建的超大视口的.container（1600px宽度）将为1600px - 60px = 1540px。

//== 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;

最后一步是为我们刚设置的新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);
}

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

1 个答案: