Bootstrap - почему только 12 столбцов?

Почему я ограничен 12 столбцами? Почему не по умолчанию больше, для большей гибкости?

Позвольте мне объяснить, что меня смущает. Скажем, я хочу создать простую страницу с левым меню и содержимое справа.

<div class="col-sm-3">Left menu</div> <!-- 258px -->
<div class="col-sm-9">Content</div> <!-- 772px -->

<div class="col-sm-4">Left menu</div> <!-- 343px -->
<div class="col-sm-8">Content</div> <!-- 687px -->

Как видно из приведенного выше примера, разница между sm-3 и sm-4 составляет почти 100 пикселей для меню! Если я хочу, чтобы меню было 300 пикселей, я не могу использовать сетку. Если бы у меня было больше столбцов, я мог бы быть более точным.

Я использую систему сетки неправильно? Почему сетка разделена на несколько столбцов?

Ответы

Ответ 2

Вы можете отредактировать количество столбцов с LESS.

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

 COLUMNS   | EVEN COLUMNS POSSIBLE
 1 column  = 1 (1x1)
 2 columns = 2 (1x2, 2x1)
 3 columns = 2 (1x3, 3x1)
 4 columns = 2 (1x4, 2x2, 4x1)
 5 columns = 2 (1x5, 5x1)
 6 columns = 4 (1x6, 2x3, 3x2, 6x1)
 7 columns = 2 (1x7, 7x1)
 8 columns = 4 (1x8, 2x4, 4x2, 8x1)
 9 columns = 3 (1x9, 3x3 9x1)
10 columns = 4 (1x10, 2x5, 5x2, 10x1)
11 columns = 2 (1x11, 11x1)

12 columns = 6 (1x12, 2x6, 3x4, 4x3, 6x2, 12x1)

Ответ 3

В большинстве версий Bootstrap используются только 12 столбцов, чтобы учесть следующее:

  • Простое создание макета
  • Отзывчивый макет для мобильных устройств
  • Пропорциональные "блоки", чтобы сохранить все симметричное.
  • Упрощенная тема "Дружественные к пользователю"

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

Вы всегда можете переопределить CSS и настроить ширину столбца любым способом!

Чтобы сделать это (и соблюдайте максимальную ширину вашего сайта), сначала вам нужно найти количество пикселей для наибольшего столбца, который является col-12. Вы можете видеть, что максимально возможная ширина составляет 1030px для вашего сайта.

Посмотрите, что вы хотели:

Если я хочу, чтобы меню было 300 пикселей, я не могу использовать сетку.

Фактически вы можете это сделать, хотя в определенной степени используете сетку. Нам просто нужно настроить меню на 300 пикселей (как вы просили) и предоставить остальную часть пространства (1030px - 300px = 730px) для основного контента.

Итак, нам нужен ящик для 300px и ящик для 730px.

Здесь вы можете использовать:

<div class="col-sm-3" style="width:300px;">Left menu</div> <!-- 300px -->
<div class="col-sm-9" style="width:730px;">Content</div> <!-- 730px -->

В принципе, вы можете изменить пропорции макета на все, что хотите. Общая ширина просто должна соответствовать остальной части сайта. Надеюсь, что это поможет.

-Dominick

Ответ 5

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

Большинство причин, которые я нашел, действительно после факта оправдания /post hoc ergo propter hoc IMHO.

Возможно, кто-то просто интуитивно решил, что это хороший дефолт, так как меньше, чем это может показаться слишком мало, слишком много, а число 12 очень хорошо знакомо всем (12 месяцев, 12 часов до полудня и 12 после... так далее)

Насколько я вижу, вероятно, было подсознательным решением использовать систему двенадцатимерных чисел