是否可以使用Bootstrap 3在12列布局內製作16列的行？

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> 

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

我希望我可以使用引導3混入，並創建一些局部變量來快速創建一個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); 
}