Настройка количества столбцов в Bootstrap 3

Обновление:

Для тех, кто сталкивается с этим вопросом: эта проблема, похоже, была решена в последующем обновлении Bootstrap. Теперь вы можете загрузить собственную сборку Bootstrap 3, указав количество нужных столбцов с настройкой @grid-columns.

http://getbootstrap.com/customize/

Оригинальный вопрос:

Я пытаюсь настроить сетку Bootstrap 3 для использования 24 столбцов, а не по умолчанию.

Как рекомендуется в нескольких ответах здесь, я пытаюсь настроить ресурсы с помощью страницы "Настроить и загрузить" Bootstrap, изменив @gridColumns, @gridColumnWidth, и @gridGutterWidth.

Но Bootstrap 3, похоже, покончил с этими переменными:

Страница настройки Bootstrap 3 (например, no @gridColumns):
http://getbootstrap.com/customize/
Страница настройки Bootstrap 2 (например, доступна опция @gridColumns):
http://getbootstrap.com/2.3.2/customize.html

Каким будет рекомендуемый способ достижения этой цели в Bootstrap 3? Большое спасибо!

Ответы

Ответ 1

В настройках для Twitter Bootstrap 3.0.0 нет опции для установки количества столбцов сетки. Это будет запланировано для следующей версии 3.0.1, см. https://github.com/twbs/bootstrap/issues/10985

Также при загрузке последней версии из github.com/twbs/bootstrap/archive/master.zip и компиляции вашей собственной версии. установка @grid-columns в переменных. Недостаточно. Имена классов столбцов сетки жестко закодированы в grid.less, вам также придется изменить/добавить их. См. Также: https://github.com/twbs/bootstrap/issues/10990

Графические столбцы определяются динамически с помощью mixins в grid.less. Вы можете изменить @grid-columns на любое число и перекомпилировать.

Ответ 2

Это приведет к установке 24 столбцов, если вы сами компилируете загрузочную ленту LESS. Помните, что @grid-gutter-width должен находиться в px, em единицы не будут работать.

@grid-gutter-width: 14px;
@grid-columns: 24;

Ответ 3

Вы также можете проверить http://tmaiaroto.github.io/gridline/

... Я пишу более подробную информацию о том, почему вы хотели бы использовать его в своем сообщении в блоге, http://www.shift8creative.com/posts/view/flexible-twitter-bootstrap-grid в случае, если вам было любопытно.

Короче говоря, сладкий... Вы не хотите изменять Twitter Bootstrap, потому что это проект, который обновляется с достаточной частотой, что вы будете раздражаться, делая ваши изменения все время.

Это хорошая практика в целом для проектов с открытым исходным кодом. Если есть что-то, что вы можете сделать поверх них в неразрушающей и неинвазивной манере, вы должны сначала сделать это. Последнее усилие в канаве - изменить исходный код проекта.

Ответ 4

Поздно, но я разработал решение для этого, используя LESS, который не требует модификации Bootstrap. https://github.com/drew-r/bootstrap-n-column