Как изменить ширину желоба Bootstrap Fluid Grid по умолчанию с 12 столбцами

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

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

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

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

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

Примените это на уровне «строки».

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

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

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

демо: http://jsfiddle.net/tg7Ey/

Я тоже искал простое решение этой проблемы. Моей целью было использовать простой CSS, а не МЕНЬШЕ. Этот ответ, как и любой другой, который я нашел, основан на компиляции 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 внутри row-div внутри контейнера-div. Но в моем случае это было очень эффективное решение, не затрагивающее исходный код бутстрапа и не использующее LESS-компилятор.