Twitter bootstrap 如何定制bootstrap grid.less文件；16列用于桌面，12列用于平板电脑_Twitter Bootstrap_Twitter Bootstrap 3_Less

Twitter bootstrap 如何定制bootstrap grid.less文件；16列用于桌面，12列用于平板电脑

twitter-bootstrap twitter-bootstrap-3 less

Twitter bootstrap 如何定制bootstrap grid.less文件；16列用于桌面，12列用于平板电脑,twitter-bootstrap,twitter-bootstrap-3,less,Twitter Bootstrap,Twitter Bootstrap 3,Less,我想为桌面生成16列，为平板电脑和手机生成12列。引导使用浮动网格列，生成网格列函数来生成网格。我试着修改它，但是没有效果 .float-grid-columns(@class) { .col(@index) { // initial @item: ~".col-@{class}-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) {

我想为桌面生成16列，为平板电脑和手机生成12列。引导使用浮动网格列，生成网格列函数来生成网格。我试着修改它，但是没有效果

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

.float网格列（@class）{
.col（@index）{//首字母
@项目：~“.col-@{class}-@{index}”；
.col（（@index+1），@item）；
}
.col（@index，@list）时（@index=<@grid columns）{//general
@项目：~“.col-@{class}-@{index}”；
.col（（@index+1），~“{list}，{item}”）；
}
.col（@index，@list）时（@index>@grid columns）{//terminal
@{list}{
浮动：左；
}
}
.col（1）；//启动它
}

您可以使用内置的引导类

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


这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
这是一个专栏
您不需要修改生成mixin的组件本身，您需要的是修改它们的使用方式（请参见grid.less
），类似这样的内容（包含在引导代码之后，或者更具体地说，包含在grid.less
之后，或者（通过相应的添加）来代替它以减少未使用的代码）：
//仅当不导入“bootstrap.less”本身时才导入此项：
@导入“/variables.less”；
& {
@导入（多个）”/mixins/grid framework.less”；
@网格柱：16个；
@介质（最小宽度：@screen sm min）{
.制作网格（sm）；
}
@介质（最小宽度：@screen-md-min）{
.制作网格（md）；
}
@介质（最小宽度：@屏幕最小长度）{
.制作网格（lg）；
}
}

其中
是指向相应引导目录的路径 我不喜欢手工做这件事。我想自定义此文件以生成我的网格：忽略其余部分，在您发表评论时键入此文件。现在查看链接。------我无法回复评论，因为我没有50%的声誉，但如果你按照我上面使用的示例，在col-lg-3之前放置一个col-sm-4，并使用css中的一些媒体查询来显示：屏幕大小调整后，每4列中没有一列，你应该会得到你想要的结果。我会帮你做的，但是你不会学（如果你需要帮助，尽管问。我的解决方案不是唯一的，但它仍然是一个解决方案。
    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);
}

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

}

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