Как изменить загрузочную сетку загрузки Bootstrap 12 Ширина стоек колонки

Я ищу, чтобы узнать, существует ли какое-либо простое решение, которое, как известно, изменит желоб в системе жидкость по умолчанию 12 grid bootstrap (2.3.0).

Я не знаком с LESS, но если это ответ, пожалуйста, также расскажите, как можно изменить. То же самое с Сасс.

Обратите внимание, что вполне допустимо изменить ширину желоба, на половину или на четверть, например, если это может сделать проще.

Необходимо выполнить следующие задачи:

Должен быть в состоянии обновить загрузчик в будущем. Это означает, что вы не редактируете фактические файлы начальной загрузки.
Функциональность должна оставаться для всех других объектов.
Должно быть просто. Менее 10 строк CSS. Например, добавленный класс или что-то еще.

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

Я обещаю дать кредит там, где это необходимо.

UPDATE:

Изменение меньших переменных, как описано в ответе Йоды, - это путь. Кто-нибудь имеет опыт изменения этих меньших переменных? Например, я считаю, что переменные, которые необходимо изменить, следующие:

// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);

Как можно изменить что-то подобное? Возможно:

@fluidGridGutterWidth768:      percentage(1.5);

Если кто-то сделал это раньше, я был бы благодарен за то, что он в правильном направлении.

Ответ 1

Самый простой способ - это, вероятно, использовать настраиваемую загрузку, которую предоставляет Twitter Bootstrap. Измените переменную @fluidGridGutterWidth в соответствии с вашими потребностями в форме. Загрузить меньше файлов здесь. Вы можете получить доступ к файлу variable.less из проекта github bootstrap, а затем изменить этот фрагмент кода:

    // Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth); // <= this one

Я думал, что сначала у вас был доступ к меньшему количеству файлов, а затем я понял, что вы используете настраиваемый gui на веб-сайте. Просто загрузите меньше файлов и внесите изменения. Затем скомпилируйте меньше файлов, чтобы дать вам файл css или использовать меньше для разработки. Вы можете использовать css или min.css для развертывания.

Ответ 2

Я думаю, вы могли бы подумать об этом. Проблема с изменением LESS-переменных заключается в том, что она изменит ее для всех желобов. Поэтому, если мне нравится 15px желоба для размещения над всем макетом, но хотите, чтобы желоб был 5px для формы внутри этой сетки, это не сработает.

Просто создайте 2 класса css, чтобы переопределить области, которые вы хотите изменить в канавке.

Примените это к уровню "строка".

.row-5-gutter{
    margin-left: -5px;
    margin-right: -5px;
}

Примените это значение на уровне столбца.

.col-5-gutter{
    padding-left: 5px;
    padding-right: 5px;
}

demo: http://jsfiddle.net/tg7Ey/

Ответ 3

Я искал простое решение этой проблемы. Моя цель состояла в том, чтобы использовать простой CSS, а не LESS. Этот ответ, как и любой другой, найденный мной, основан на компиляции LESS или использовании онлайн-компилятора бутстрапа. Поэтому я попытался найти свое собственное решение.

Считая документацию, вы найдете следующее о ширине желоба: Столбцы создают водосточные желоба (промежутки между содержимым столбца) через отступы. Это заполнение смещается в строках для первого и последнего столбцов с помощью отрицательного поля на .rows.

На основании этого я попробовал следующее:

.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}

Теперь ширина желоба составляла всего 2 пикселя. Моя следующая проблема заключалась в том, что моя предполагаемая ширина была нечетным числом. Мое решение состояло в том, чтобы удалить прокладки и поля слева и полностью положить их справа:

.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}

Теперь у меня ширина ширины 5 пикселей.

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