Question

我的整个网站有一个标准的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>

My 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 mixins并创建一些局部变量来快速创建一个16列网格的单个实例，但我的方法不起作用;我最终为这16个内柱提供了标准的12列网格。

这是不可能的事情，还是我误解了应该怎么做？

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

是否可以使用Bootstrap 3在12列布局中创建一个16列的行？

1 个答案: