是否可以使用 Bootstrap 3 在 12 列布局中创建 16 列行？答案

【问题标题】：Is it possible to make a 16-column row inside a 12-column layout using Bootstrap 3?是否可以使用 Bootstrap 3 在 12 列布局中创建 16 列行？
【发布时间】：2013-12-19 06:47:08
【问题描述】：

我的整个网站有一个标准的 12 列布局。在其中一列中，我需要能够分成 16 个额外的列。

<div class="row">
   <div class="tools"></div>
   <div class="content">
      <div class="row">
         <div class="col1"></div>
         <div class="col2"></div>
         <div class="col3"></div>
         <div class="col4"></div>
         <div class="col5"></div>
         <div class="col6"></div>
         <div class="col7"></div>
         <div class="col8"></div>
         <div class="col9"></div>
         <div class="col10"></div>
         <div class="col11"></div>
         <div class="col12"></div>
         <div class="col13"></div>
         <div class="col14"></div>
         <div class="col15"></div>
         <div class="col16"></div>
      </div>
   </div>
</div>

我的 LESS 看起来像这样：

.row { 
   .make-row();
   .tools { .make-md-column(3) }
   .content { 
      .make-md-column(3);
      div {
         @grid-columns:              16;
         @grid-gutter-width:         10px;
         @grid-float-breakpoint:     768px;
         .make-md-columns(1);
      }
    }

我希望我可以使用 Bootstrap 3 mixin 并创建一些局部变量来快速创建 16 列网格的单个实例，但我的方法不起作用；我最终为这 16 个内列创建了一个标准的 12 列网格。

这是不可能的事情还是我误解了应该如何做到这一点？

【问题讨论】：

标签： twitter-bootstrap less

【解决方案1】：

您的问题不是重复的，但您可以在这里找到答案：https://stackoverflow.com/a/19724075/1596547。总之，Bootstrap 不支持子网格，因此目前无法使用相同的代码和设置编译您的子/秒。

可能的解决方案是单独编译您的子网格并将 CSS 集成到您的项目中。

使用类似的东西：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

@grid-columns: 16;
@media (min-width: @screen-md-min) {
  .make-grid-columns-float(md16);
  .make-grid(@grid-columns, md16, width);
  .make-grid(@grid-columns, md16, pull);
  .make-grid(@grid-columns, md16, push);
  .make-grid(@grid-columns, md16, offset);
}

【讨论】：