Подтвердить что ты не робот

Как использовать бутстрап с 16 или 24 столбцами

Мне нужна настройка справки bootstrap 2.0.4 для столбца 16 или 24 вместо столбцов по умолчанию, я не могу понять, что я делаю неправильно, я попробовал параметр настройки на сайте начальной загрузки, и я попытался изменить переменные сетки в файле variables.less и перекомпилируйте bootstrap.less, используя Crunch, но для обоих тестов у меня все равно есть тот же результат .it все равно 12 столбцов!!! когда я пытаюсь установить div для span12, он все еще занимает весь экран?

Может ли кто-нибудь привести меня к тому, что я делаю неправильно, или если кто-то может создать версии из 16 и 24 столбцов и отправить их мне, что было бы идеально.

4b9b3361

ОТВЕТЫ

Ответ 1

Этот метод предназначен для более старой версии Bootstrap - Version 2.3.1

Нажмите эту ссылку, чтобы настроить загрузку: http://twitter.github.com/bootstrap/customize.html

Здесь вы найдете примеры. Измените параметры в соответствии с вашими потребностями.

16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px

16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px

24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px

Ответ 2

Достаточно просто изменить меньше - http://twitter.github.com/bootstrap/scaffolding.html#gridCustomization

Вы хотите изменить переменные там, где хотите -

например.

@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px

Если вы используете флюидную сетку, вы тоже захотите изменить эти переменные пропорционально, иначе span12 будет по-прежнему занимать 100% от ширины, а span24 займет 200%

@fluidGridColumnWidth
@fluidGridGutterWidth

Как указано:

Как настроить

Изменение сетки означает изменение трех переменных @grid * и перекомпиляцию Bootstrap. Измените переменные сетки в переменных .less и используйте один из четырех способов документирования для перекомпиляции. Если вы добавляете больше столбцов, обязательно добавьте CSS для тех, которые находятся в grid.less.

Вы можете изменить переменные и загрузить новый css прямо здесь: http://twitter.github.com/bootstrap/download.html#variables

Вот скомпилированный пример, который должен работать для 16 столбцов (не проверял, дайте мне знать, как это работает): https://s3.amazonaws.com/intenex/bootstrap16columns.zip

Ответ 3

Для 24 колонок вы можете разделить главный div

<div class="col-md-12">

    <div class="col-md-6">
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
    </div>

    <div class="col-md-6">12 here</div>

</div>

демо-версия codepen

Ответ 4

Изменить: создание решеток с настраиваемым количеством столбцов было восстановлено и может быть выполнено на странице настройки загрузки .

По неизвестным мне причинам, последняя версия Bootstrap (3.0.0/1) не позволяет создавать сетку, отличную от 12 столбцов, что является большим позором.

Что мы можем сделать в настоящее время и которое, в свою очередь, позволит создавать более настраиваемые пакеты начальной загрузки, - это настроить свой собственный настройщик Bootstrap.

Изменить: я просто попробовал. Установка всех зависимостей прошла довольно гладко, придерживаясь рекомендаций на странице Docs GitHub.

Сгенерированный образец 24 столбца сетки

Editor required inserting some code along with jsfiddle link. There no point in pasting anything though.

Ответ 5

16 Колонка

960px

45px * 16 = 720 Столбец

15px * 16 = 240 Gutter

1200px

53px * 16 = 848 Столбец

22px * 16 = 352 Gutter

768px

33px * 16 = 528 Столбец

15px * 16 = 240 Gutter

Ответ 6

Установить 24 столбца:

960
Столбец 35px
5px Gutter

1200
Столбец 40px
10px Gutter

768
Столбец 29px
3px Gutter

Ответ 7

Я использую колонки Grid 30 для моего проекта (доступны сетки 24 и 100)

https://github.com/zirafa/bootstrap-grid-only

может потребоваться какая-то настройка в зависимости от вашего требования

Ответ 8

Вот быстрый и простой способ, которым я нашел 16 столбцов, используя вложенность...

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
<div class="row">
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
</div>
<!-- row -->