Bootstrap, less, как изменить число @ grid-столбцов для вложенных строк?

Question

Я создаю компоновку bootstrap 3, и я пытаюсь изменить количество столбцов для вложенной строки, чтобы вложенные столбцы имели ту же ширину, что и столбцы верхнего уровня. Я пробовал что-то вроде этого, но безрезультатно.

<main id="container" class="section"> 
    <div class="main-body"> 
    <div class="sidebar"> 
     <p>content</p> 
    </div> 
    <div class="main-content"> 
     <div class="items"> 
      <div class="item-1"> 
       <p>content</p> 
      </div> 
      <div class="item-2"> 
       <p>Content</p> 
      </div> 
     </div> 
    </div> 
    </div> 
</main> 

.section{ 
    .container; 
} 

.col-sm-2, .col-sm-10, .col-sm-8{ 
    border: 1px solid black;  
} 
.main-body { 
    .make-row(); 
    .sidebar { 
    .make-sm-column(2); 
    } 
    .main-content { 
    .make-sm-column(10); 
    } 
    @grid-columns: 10; 
    .items { 
    .make-row(); 
    .item-1{ 
     .make-sm-column(2); 
    } 
    .item-2{ 
     .make-sm-column(8); 
    } 
    } 
    @grid-columns: 12; 
} 

Сетка внутри вложенной строки еще, кажется, имеет 12 столбцов, и я хочу, чтобы иметь 10. я нашел в приведенном выше примере в этом: article Парень сделал это в дерзости, и я переписал его в меньше, потому что я не очень люблю пользователя, но, к сожалению, это не сработало. Что я делаю неправильно?

Answer 1

В Менее переменных lazy loaded (для более подробного/дружественного учебника о том, что это на самом деле означает для вашего кода, см. Variable Semantics).

Таким образом, первая проблема вашего фрагмента выше: @grid-columns: 12; в конце .main-body переопределяет @grid-columns: 10; (так что он просто не действует).

Вторая проблема более сложная, даже если вы удалите @grid-columns: 12; в конце .main-body, @grid-columns: 10; еще не будет иметь никакого влияния на сетке Mixins как те, которые по-прежнему будет использовать значение глобально определяется @grid-columns которое 12 (вы можете переопределить глобальное значение, но это применимо к каждому классу сетки, включая значения по умолчанию, то есть не совсем наша цель).

Ну, не беспокоить вас все больше и больше головы царапин деталей на область видимости переменных, разделяет пространства имен и видимости, здесь, вероятно, самое простое решение (среди нескольких других):

Define @grid-columns: 10; внутри .items (предполагается, что это является область вам это нужно), а затем повторно импортировать файл, который определяет соответствующие Примеси сетки также прямо внутри .items, так что вы просто получить копию этого сетевого Mixins с @grid-columns: 10; применяются:

.main-body { 
    // here default `@grid-columns: 12` applies: 
    .make-row(); 
    .sidebar  {.make-sm-column(2)} 
    .main-content {.make-sm-column(10)} 

    .items { 
     // here we use 10 columns: 
     @import (multiple) "<bootstrap>/less/mixins/grid.less"; 
     @grid-columns: 10; 
     .make-row(); 
     .item-1 {.make-sm-column(2)} 
     .item-2 {.make-sm-column(8)} 
    } 
} 

Answer 2

Это должно работать:

.section { 
    .container; 
} 

.main-body { 
    .make-row(); 

    .sidebar, 
    .item-2 { 
     .make-sm-column(2); 
    } 

    .item-1 { 
     .make-sm-column(8); 
    } 
} 

Edit: Но это может быть лучше использовать бутстрэпами классы в HTML разметке, чтобы предотвратить вздутие файл CSS:

<main id="container" class="section"> 
    <div class="main-body row"> 
    <div class="sidebar col-sm-2"> 
     <p>content</p> 
    </div> 
    <div class="main-content"> 
     <div class="items"> 
      <div class="item-1 col-sm-8"> 
       <p>content</p> 
      </div> 
      <div class="item-2 col-sm-2"> 
       <p>Content</p> 
      </div> 
     </div> 
    </div> 
    </div> 
</main>