我想为桌面生成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
}
答案 0 :(得分：0)
您可以使用Bootstraps内置类。
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>
您需要确保将填充/边距设置为必要的内容，因为Bootstrap内置了填充/边距，这可能会使其结构与您查找的结构不同。
然后，您可以使用col-xs-4和col-sm-4对平板电脑和移动设备进行一些定制，转换为12列，并可能使用CSS删除特定屏幕分辨率下的某些列。
答案 1 :(得分：0)
您不需要自己修改那些生成混合的内容，您需要修改它们的使用方式（请参阅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目录的路径。
答案 2 :(得分：0)
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);
}