如何自定义引导 grid.less 文件；台式机 16 列，平板电脑 12 列

Question

我想为台式机生成 16 列，为平板电脑和移动设备生成 12 列。 bootstrap 使用 float-grid-columns、make-grid-column 函数来生成网格。我尝试修改它，但无法得到结果。

.float-grid-columns(@class) {
  .col(@index) { // initial
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1); // kickstart it
}

Answer 1

您可以使用 Bootstrap 内置类。

16 列桌面示例（请记住，这是 CSS 相关问题的 HTML 解决方案，但应该根据您的问题给出相同的结果）：

<div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="col-lg-3">
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
          </div>
        </div>
      </div
    </div>

您需要确保将 padding/margin 设置为任何必要的值，因为 Bootstrap 内置了 padding/margins，这可能会给它一个不同于您正在寻找的结构。

然后，您可以使用 col-xs-4 和 col-sm-4 对其进行一些自定义，以将其转换为 12 列，并可能使用 CSS 删除特定屏幕分辨率下的某些列。

参考http://getbootstrap.com/examples/grid/

Answer 2

你不需要自己修改那些生成的 mixin，你需要修改它们的使用方式（参见grid.less），类似这样的东西（被包含在之后引导代码，或更具体地说，在grid.less 之后或（带有相应的添加）而不是它以减少未使用的代码）：

// import this only if you don't import "bootstrap.less" itself:
@import "<bootstrap/less>/variables.less";

& {

@import (multiple) "<bootstrap/less>/mixins/grid-framework.less";

@grid-columns: 16;

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

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

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

}

<bootstrap/less> 是对应 Bootstrap 目录的路径。

Answer 3

    I achieved it by:

    on variables.less, added:
    ----------------------------
    @grid-xs-columns: 4;
    @grid-sm-columns: 12;
    @grid-md-columns: 16;

    on grid.less file, modified:
    -------------------------------
    .make-grid(xs,@grid-xs-columns);
    // Small grid
    //
    // Columns, offsets, pushes, and pulls for the small device range, from phones
    // to tablets.
    @media (min-width: @screen-sm-min) {
        .make-grid(sm,@grid-sm-columns);
    }

    // Medium grid
    //
    // Columns, offsets, pushes, and pulls for the desktop device range.
    @media (min-width: @screen-md-min) {
       .make-grid(md,@grid-md-columns);
    }

on grid-framework.less; modified
--------------------------------
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
    .col-@{class}-@{index} when (@class = xs){
      width: percentage((@index / @grid-xs-columns));  
    }  
    .col-@{class}-@{index} when (@class = sm){
      width: percentage((@index / @grid-sm-columns));  
    }  
    .col-@{class}-@{index} when (@class = md){
      width: percentage((@index / @grid-md-columns));  
    }  
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} when (@class = xs){
    left: percentage((@index / @grid-xs-columns));
  }
  .col-@{class}-push-@{index} when (@class = sm){
    left: percentage((@index / @grid-sm-columns));
  }
  .col-@{class}-push-@{index} when (@class = md){
    left: percentage((@index / @grid-md-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} when (@class = xs){
    right: percentage((@index / @grid-xs-columns));
  }
  .col-@{class}-pull-@{index} when (@class = sm){
    right: percentage((@index / @grid-sm-columns));
  }
  .col-@{class}-pull-@{index} when (@class = md){
    right: percentage((@index / @grid-md-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index}  when (@class = xs){
    margin-left: percentage((@index / @grid-xs-columns));
  }
    .col-@{class}-offset-@{index}  when (@class = sm){
    margin-left: percentage((@index / @grid-sm-columns));
  }
    .col-@{class}-offset-@{index}  when (@class = md){
    margin-left: percentage((@index / @grid-md-columns));
  }

}

// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

// Create grid for specific class
.make-grid(@class,@numbers) {
  .float-grid-columns(@class);
  .loop-grid-columns(@numbers, @class, width);
  .loop-grid-columns(@numbers, @class, pull);
  .loop-grid-columns(@numbers, @class, push);
  .loop-grid-columns(@numbers, @class, offset);
}