是否可以指定16個柱子引導3

Question

我有點困惑。我正試圖將boostrap 3格調整爲16列。

我在我的variable.less改變這些增值經銷商：

@grid-columns: 16; 
@gridColumnWidth: 32px; 
@gridGutterWidth: 30px 

但仍當我檢查我的col-lg-12類，它有一個100％的寬度。

Answer 1

列數被硬編碼到.less文件中。 @grid-columns僅用於計算寬度。

引導源代碼： https://github.com/twbs/bootstrap/blob/master/less/grid.less#L74

顯然改變的列數將可能被添加到版本3.1。 https://github.com/twbs/bootstrap/issues/9436#issuecomment-22849238

Answer 2

添加該網格生成器爲* .LESS文件

/** 
    GRID GENERATOR 

    .grid-generator(16,20px,'mycol','myrow'); 

    generate 16-column grid with 20px-gutter 

    ROW 

    .myrow{...} 

    COLUMNS 

    .mycol-1{...} ... .mycol-16{...} 

    OFFSETS 

    .mycol-offset-1{...} ... .mycol-offset-15{...} 

    PULLS 

    .mycol-pull-0{...} ... .mycol-pull-15{...} 

    PUSHS 

    .mycol-push-0{...} ... .mycol-push-15{...} 

    or for Bootstrap 3 

    standard bootstrap-3 grid 

    .grid-generator-responsive(); 

    16-column bootstrap-3 grid with 20px gutter 

    .grid-generator-responsive(16, 20px); 

    @author: arthur.creek@gmail.com 

*/ 

.grid-generator(@cols: 12, @gutter: 30px, @col-name: 'col', @row-name: 'row', @offsets: true, @ordering: true){ 

    // row container 
    .init-row() when (@row-name > '') { 
    @name: ~".@{row-name}"; 
    @{name}{ 
     margin-left: (@gutter/-2); 
     margin-right: (@gutter/-2); 
     &:before,&:after{ 
     content: " "; 
     display: table; 
     } 
     &:after{ 
     clear: both; 
     } 
    } 
    } 
    .init-row(); 

    // common properties 
    .properties(@index) when (@index = @cols) 
    { 
    @name: ~".@{col-name}-@{index}"; 
    .properties(@index - 1, @name); 
    } 

    .properties(@index, @names) when (@index > 0) 
    { 
    @name: ~".@{col-name}-@{index}"; 
    .properties(@index - 1, ~"@{names}, @{name}"); 
    } 

    .properties(@index, @names) when (@index = 0) 
    { 
    @{names} 
    { 
     position: relative; 
     min-height: 1px; 
     padding-left: (@gutter/2); 
     padding-right: (@gutter/2); 
     float: left; 
    } 
    } 

    .properties(@cols); 

    // unfloat for full width 
    @lname: ~".@{col-name}-@{cols}"; 
    @{lname} { 
    float: none; 
    } 

    // WIDTH of columns 
    .width(@index) when (@index > 0) 
    { 
    @name: ~".@{col-name}-@{index}"; 
    @{name} 
    { 
     width: (100%/@cols * @index); 
    } 
    .width(@index - 1); 
    } 

    .width(@cols); 

    // OFFSET 
    .offset(@index) when (@index > 0) and (@offsets) 
    { 
    @name: ~".@{col-name}-offset-@{index}"; 
    @{name} 
    { 
     margin-left: (100%/@cols * @index); 
    } 
    .offset(@index - 1); 
    } 
    .offset(@index) when (@index = 0) and (@offsets) 
    { 
    @name: ~".@{col-name}-offset-@{index}"; 
    @{name} 
    { 
     margin-left: 0; 
    } 
    } 
    .offset(@cols - 1); 

    // PUSH 
    .push(@index) when (@index > 0) and (@ordering) 
    { 
    @name: ~".@{col-name}-push-@{index}"; 
    @{name} 
    { 
     left: (100%/@cols * @index); 
    } 
    .push(@index - 1); 
    } 
    .push(@index) when (@index = 0) and (@ordering) 
    { 
    @name: ~".@{col-name}-push-@{index}"; 
    @{name} 
    { 
     left: auto; 
    } 
    } 
    .push(@cols - 1); 

    // PULL 
    .pull(@index) when (@index > 0) and (@ordering) 
    { 
    @name: ~".@{col-name}-pull-@{index}"; 
    @{name} 
    { 
     right: (100%/@cols * @index); 
    } 
    .pull(@index - 1); 
    } 
    .pull(@index) when (@index = 0) and (@ordering) 
    { 
    @name: ~".@{col-name}-pull-@{index}"; 
    @{name} 
    { 
     right: auto; 
    } 
    } 
    .pull(@cols - 1); 

} 

// standard bootstrap-3 grid 
// .grid-generator-responsive(); 

// 16-column bootstrap-3 grid with 20px gutter 
// .grid-generator-responsive(16, 20px); 

.grid-generator-responsive(@cols: 12, @gutter: 30px, @col-name: 'col', @row-name: 'row'){ 

    // XS 
    .grid-generator(@cols, @gutter, ~"@{col-name}-xs", @row-name, false, false); 

    // SM 
    @media (min-width: 768px) { 
    .grid-generator(@cols, @gutter, ~"@{col-name}-sm", ''); 
    } 

    // MD 
    @media (min-width: 992px) { 
    .grid-generator(@cols, @gutter, ~"@{col-name}-md", ''); 
    } 

    // MD only 
    @media (min-width: 1200px){ 
    .grid-generator(@cols, @gutter, ~"@{col-name}-lg", ''); 
    } 
} 

，並添加較少的代碼

.grid-generator-responsive(16, 30px, 'col', 'row'); 

或使用默認

.grid-generator-responsive(16); 

就會產生16列引導與30px排水溝網格

Answer 3

在一列中可以通過nesting a grid實現多於12列。我已經嘗試過這個，並提出了這個示例代碼。

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-9">Nullam vehicula magna eget egestas vestibulum. Fusce sagittis vitae enim a interdum. Cras a augue placerat, laoreet nulla vel, posuere quam. Vivamus suscipit, justo at iaculis vulputate, felis ex placerat magna, at tincidunt ligula metus non ligula. Ut maximus neque quis diam aliquam, eget efficitur mauris cursus. Phasellus ultrices dui vitae porttitor fermentum. Mauris id hendrerit felis, nec pellentesque diam. Nullam pellentesque scelerisque orci eget elementum. Phasellus eget risus rhoncus, facilisis nunc sit amet, fringilla mauris. Nunc vitae ultricies nisi, at pretium tortor. Vestibulum vulputate nibh ex, vitae placerat nisi consectetur nec. Maecenas fringilla in eros nec varius. Nam at dolor finibus, porttitor quam nec, consectetur dui. Nulla rhoncus sit amet magna sed condimentum.</div> 
      <div class="col-md-3">Proin suscipit et urna sit amet ultrices. Morbi et tincidunt augue. Mauris ornare commodo urna quis sagittis. Phasellus egestas vehicula ex et fringilla. Curabitur tristique ultrices massa. Quisque nisl enim, malesuada eget purus id, luctus facilisis libero. Praesent ut nisl ligula. Maecenas augue velit, gravida id enim eu, feugiat laoreet orci.</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12">Sed a dignissim mauris, eget accumsan nunc. Nullam facilisis magna orci, vel volutpat justo accumsan vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend nisi ut purus volutpat varius. Integer volutpat erat vitae imperdiet feugiat. Nullam nec luctus mi. Donec accumsan lacus mi, a aliquam elit pretium sit amet. Aenean laoreet fermentum tempor. Phasellus sagittis dui ornare, varius nisl ut, bibendum urna.</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-9"> 
       <div class="row"> <!-- Row nested inside a column --> 
        <div class="col-md-2">Proin viverra porta orci, et lacinia nisl tempus vitae. Nam a pharetra massa.</div> 
        <div class="col-md-2 col-md-offset-1">In sed vestibulum risus, ut malesuada nisl. Nulla cursus, enim in pretium euismod, orci est consectetur lorem, ut posuere nunc nisi vitae tellus.</div> 
        <div class="col-md-2">In sed vestibulum risus, ut malesuada nisl. Nulla cursus, enim in pretium euismod, orci est consectetur lorem, ut posuere nunc nisi vitae tellus.</div> 
        <div class="col-md-2">In sed vestibulum risus, ut malesuada nisl. Nulla cursus, enim in pretium euismod, orci est consectetur lorem, ut posuere nunc nisi vitae tellus.</div> 
        <div class="col-md-2 col-md-offset-1">Proin viverra porta orci, et lacinia nisl tempus vitae. Nam a pharetra massa.</div> 
       </div> 
      </div> 
      <div class="col-md-2 col-md-offset-1">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</div> 
     </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <!-- Latest compiled and minified JavaScript --> 
</body>