Почему bootstrap меньше игнорирует мои переменные?

Question

Когда я делаю:

@textColor: green; 

Он работает. Мой текст становится зеленым. Но когда я это делаю:

@gridColumnWidth: 10px; 
@gridGutterWidth: 0px; 
@fluidGridColumnWidth: 1%; 
@fluidGridGutterWidth: 0%; 

В мой макет нет изменений. Может кто-нибудь объяснить, что происходит?

обновление Я заметил, что CSS, который получает генерируется кажется правильным, но затем в нижней части существует @media (мин-ширина: 1200px) и другие аналогичные разделы, которые повторно генерировать сетку со значениями по умолчанию ,

Answer 1

Генерация сетки жестко запрограммирована. Вы можете переопределить следующее:

@import "twitter/bootstrap"; 

// Your custom stylesheets goes here (override Less here) 
@gridColumnWidth: 10px; 
@gridColumns: 16; 
@fluidGridColumnWidth: 1%; 

#gridSystem { 
    .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) { 
    // Default columns 
    .span12 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); } 
    .span13 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); } 
    .span14 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); } 
    .span15 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); } 
    .span16, 
    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); } 
    // Offset column options 
    .offset12 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 12); }  
    .offset13 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 13); }  
    .offset14 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 14); }  
    .offset15 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 15); }  
    } 
} 

// Fluid grid system 
// ------------------------- 
#fluidGridSystem { 
    // Take these values and mixins, and make 'em do their thang 
    .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) { 
    // Row surrounds the columns 
    .row-fluid { 
     // Default columns 
     .span13 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 13); } 
     .span14 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 14); } 
     .span15 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 15); } 
     .span16 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 16); } 
    } 
    } 
} 



// Input grid system 
// ------------------------- 
#inputGridSystem { 
    .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) { 
    input, 
    textarea, 
    .uneditable-input { 
     &.span13 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); } 
     &.span14 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); } 
     &.span15 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); } 
     &.span16 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); } 
    } 
    } 
} 

table { 
    .span13 { .tableColumns(13); } 
    .span14 { .tableColumns(14); } 
    .span15 { .tableColumns(15); } 
    .span16 { .tableColumns(16); } 
} 

Answer 2

Twitter Bootstrap не очень хорошо обработан. Это на самом деле раздражает и раздувается. В файле responsive.less сетка регенерируется для каждого реагирующего шага, поэтому вам нужно войти туда и настроить ее по своему вкусу.

Answer 3

Я боролся с этим сам в течение некоторого времени. Но я, наконец, понял это, и это невероятно просто. Взгляните на вопрос, который я опубликовал, где я также обновил сквозное решение.

How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать. Надеюсь, это поможет!

Для быстрого ответа, только переменные, которые должны быть изменения по отношению к системе сетки являются следующие:

@gridColumns:    12; //number of columns 
@gridColumnWidth:   60px; //column width 
@gridGutterWidth:   20px; //gutter width 
@gridRowWidth:   (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *   (@gridColumns - 1)); 

Вы должны быть только изменения @gridColumnWidth и @gridGutterWidth переменные. Процентные переменные рассчитываются оттуда. Если вы хотите, чтобы изменить столбец и ширину желоба для каждой точки медиа запросов, вы должны сделать это для каждой точку останова переменного:

@gridColumns:    12; 
@gridColumnWidth:   60px; 
@gridGutterWidth:   20px; 
@gridRowWidth:   (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *   (@gridColumns - 1)); 

// 1200px min 
@gridColumnWidth1200:  70px; 
@gridGutterWidth1200:  30px; 
@gridRowWidth1200:  (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); 

// 768px-979px 
@gridColumnWidth768:  42px; 
@gridGutterWidth768:  20px; 
@gridRowWidth768:   (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 *  (@gridColumns - 1)); 

Таким образом, чтобы изменить всю систему отзывчивой сетки, изменить шесть переменных. Это НЕ жестко закодировано, как утверждает Фархан.

easiet способ изменить эти переменные (и столь же эффективным, как изменение их самостоятельно) через их веб-сайт:

http://twitter.github.com/bootstrap/customize.html

Я надеюсь, что это помогает кто-то!