Почему не работает сетка бутстрап

Типичная ошибка сетки (Bootstrap Grid), или почему дизайнер и верстальщик не понимают друг друга

Сталкивались ли вы с ситуацией, когда текст и блоки, которые прекрасно вмещаются в макете фотошопа, почему-то упрямо не хотят слушаться в верстке – не вмещаются в заданную макетом ширину? При этом и дизайнер, и верстальщик используют одинаковую сетку, например, сетку Bootstrap 3.

Просмотрев существенное число сайтов, пришел к выводу, что в среду дизайнеров и верстальщиков закралась одна банальная ошибка.

Сетка бутстрапа, как распространенный пример сетки, устанавливает 12 колоночную схему, которая на экранах от 1200px и более шириной имеет размеры между колонками 30px и боковые отступы контента по 15px слева и справа. Учитывая, что ширина колонок дизайнером задается в пикселях, а верстальщиком – в процентах, описанная ниже ошибка не сразу заметна.

Как работает с сеткой дизайнер? Обычно эта сетка генерируется каким-либо сервисом, скачивается и устанавливается в фотошоп. Как работает с сеткой верстальщик? Сетка берется из фреймворка Bootstrap 3.

Тогда в чем же проблема, если размеры сетки (колонок и интервалов) одинаковые?

Суть проблемы кроется в удобном CSS-свойстве «box-sizing» со значением «border-box», что по умолчанию установлено в бутстрапе. Из-за этого дизайнер ширину боковых отступов считает добавочно к ширине контента (1170px плюс боковые отступы по 15px справа и слева), а верстальщик, сам не ведая того, включает их в ширину контента (1170px, включая боковые отступы по 15px, т.е. ширина контента равна 1140px). Таким образом получается, что в проекте на разных этапах используют две разные сетки причем у верстальщика она более узкая.

Встречается данная ошибка и при использовании других сеток, отличных от Bootstrap. По-видимому, она зародилась, с появлением «border-box».

Решение простое – скорректировать размер контейнера: «container » (1170px – контент плюс 15px отступы справа и слева). Также необходимо провести соответствующую корректировку контейнера на величину боковых отступов для экранов других разрешений.

Как мне кажется, не имеет смысла спорить о том, кто ответственен за исправление ошибки. Хорошим тоном для дизайнера будут уточнить этот вопрос у верстальщика, а верстальщику – помнить о такой особенности применения «border-box» для сетки. Исправление ошибки в широко распространенном фреймворке также увеличит количество сайтов, строго соответствующих дизайну.

Источник

Сетка в Bootstrap 4. Подробное руководство

Jul 5, 2018 · 10 min read

Понимание сеток в Bootstrap — это самый важный момент работы с этим замечательным фреймворком, понимая сетки, вы сможете делать на нем без препятствий буквально всё, что захотите. Советую почитать статьи Узнаем Bootstrap 4 за 30 минут, создавая лендинг и Самые полезные хитрости в Bootstrap

👉 Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

Что такое система сеток в Bootstrap?

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

Сетки на Bootstrap могут использоваться отдельно, без Bootstrap JavaScript и других CSS компонентов. Вам надо только скачать и сослаться на «bootstrap-grid.css» , который включает в себя flexbox классы и классы для сетки. Вообще, более подробно для этого есть отдельная документация на официальном сайте.

Вот самый простой пример применения сетки:

Этот код выдаст нам одну большую колонку на всю ширину вьюпорта.

А вот уже две колонки:

И вот на три колонки:

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

Простые концепты сетки очень быстро можно понять, но вы уже наверное начинаете удивляться, почему вся эта HTML разметка так необходима. У вас уже возможно есть несколько вопросов, таких как: Зачем мне нужен контейнер? Могу ли я сделать один контейнер шире, чем другие?

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

Поверьте мне. Понимание “Правил сетки” сэкономит вам кучу времени и нервов. Прочитайте их очень внимательно.

Правила сетки:

Колонки должны быть прямыми потомками Row

Row используются только для того, чтобы включать в себя колонки и не для ничего больше.

Row должны быть помещены внутри контейнера

Эти правила ОЧЕНЬ ВАЖНЫ. Строки и колонки всегда работают вместе и вам надо смотреть за тем, что один не оставался без другого.

Ждите косяка, если вы не будете соблюдать эти три простые правила. Я ответил на бесчисленное количество вопросов на Stack Overflow, просто применяя эти правила. По началу, это может быть довольно сложным, но всё последующее реально станет доступным для понимания, после того, как вы поймете то, как работает сетка.

Как использовать сетку Bootstrap. Правильный подход.

Контейнер

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

Контейнер может использоваться для хранения любых элементов и самого контента. Он используется не только для строк и колонок сетки. Для примера, вот идеальная и правильная разметка Bootstrap:

Не игнорируйте контейнер

С первого взгляда, контейнер может показаться пустяковым и не сильно уж нужным, но он очень важен для контроля ширины шаблона. Контейнер также используется для равномерного выравнивания граней шаблона внутри вьюпорта браузера. Контейнер используется, чтобы противодействовать отрицательным внешним отступам row, о чем я расскажу немного позже.

У Bootstrap 4 есть 2 типа контейнера. В моих примерах я использовал .container , но также есть и полноэкранный .container-fluid . Вы можете использовать любой из них:

1 — Контейнер с фиксированной шириной, для центровки контейнера по середине шаблона.

2 — Контейнер с шириной во весь экран.

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

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

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

У строк (rows) есть отрицательные левые/правые внешние отступы в -15px . Внутренний отступ контейнера в 15px используется для пресечения срабатывания отрицательных внешних отступов в строке контейнера. Это делается для равномерного выравнивания по граням в шаблоне. Если вы не поместите строку (row) в контейнер, то она будет выходить за пределы своего контейнера, вызывая нежелательные горизонтальные прокрутки.

Строки (Rows) и Колонки (Columns)

Сейчас, я бы хотел, чтобы .row в Bootstrap не были на самом деле именованы как “строки” (row). Название “строка”, зачастую запутывающее и скрывает настоящее предназначение .row .

Когда вы думаете о строке, вы возможно думаете о горизонтальной линии, что вполне ОК, НО, лучше думать о строке, как о родителе для колонок.

Думайте о строках, как о группе колонок (Columns)

Это потому, что колонки внутри .row не всегда располагаются горизонтально вдоль вьюпорта. Иногда нам надо, чтобы колонки в шаблоне были горизотальны, а иногда нам надо, чтобы они располагались вертикально. Концепция горизонтального vs. Вертикального шаблона является сущностью адаптивного дизайна. Единственным предназначением “строки”, является содержание одной или более “колонки”.

Не вставляйте контент прямо в “строку”!

Так делать нельзя:

“колонки” и только колонки, размещаются внутри “строк”.

А контент размещается уже внутри “колонок”.

Так же очень важно упомянуть, что .row имеет display: flex . А как потомок в Flexbox, “колонка” в каждой строке одной и той же высоты.

Благодаря Flexbox, горизонтальное и вертикальное выравнивание легко делается с использованием рабочих классов Bootstrap 4 — flex и auto-margin.

А теперь настало время углубиться в строки и колонки и то, как они на самом деле взаимодействуют. Есть разные типы колонок и разные способы использования их в шаблоне. Они как магия.

Счастье в колонках!

Создают горизонтальные разделители по вьюпорту.

Могут иметь разную ширину.

Раскладку горизонтально слева направо, вертикально сверху вниз.

Могут изменять позицию (порядок) относительно родственных элементов в той же строке.

Имеют ту же высоту, что и другие родственные элементы в той же строке.

Могут “расти” или “урезаться” по ширине.

Могут автоматически врапиться или вертикально “слепляться” при необходимости или при нужной ширине экрана.

Могут содержать больше строк и колонок при вложении.

Всё что нужно знать о колонках Bootstrap

Снова не забываем, что колонки должны быть прямыми потомками строк.

И так, колонки создают горизонтальные деления по вьюпорту. Пространство между колонками называется “gutter”.

Классическая сетка Bootstrap имеет 12 колонок:

Таким образом, колонки могут быть равномерно разделены на 12 частей. Вот пример, 6 колонок (12/6=2) :

И дальше уже дело простой математики:

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

Учитывая такую гибкость, возможности шаблона кажутся бесконечными.

Но сетка не всегда может быть из 12 элементов. Спасибо flexbox , у Bootstrap 4 есть новые “ auto-layout ” колонки. Такие безразмерные колонки дают вам больше гибкости при разработке шаблонов.

Теперь вы знаете как использовать колонки для создания горизонтального шаблона. Но подождите, есть ещё кое что! Давайте поговорим о некоторых модных штучках, которые могут делать наши любимые колонки.

Как вы видели выше, колонки могут быть разной ширины:

А вы знали, что ширина колонки может изменяться в зависимости от ширины экрана?

Это называется адаптивным дизайном и я расскажу вам как это на самом деле работает.

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

Колонки в одной строке располагаются вдоль горизонтально, а затем встают вертикально вниз. Это вертикальное сталкивание или “обертывание”, происходит когда элементы колонок в одном ряду превышают количество двенадцати. Этот процесс известен как “враппинг колонок”

Колонки в одной строке переходят на следующую строку, через каждые 12 элементов:

Ширина колонки и “обертывание” может контролироваться, используя разные ряды адаптивной сетки. (a.k.a “Grid Breakpoints”)

Колонки могут менять позицию относительно потомков в том же ряду:

Колонки могут содержать других потомков Rows & Columns. Это называется вложением:

Колонки могут “расти” и “урезаться” по ширине. Это auto-layout колонки:

Как делать адаптивный дизайн с Bootstrap.

Ряды сетки, медиа запросы и брейкпоинты, ю-хууу!

Я еще не прекратил говорить о рядах и колонках, так как они звезды нашего шоу, когда речь заходит об адаптивном дизайне.

Всё из-за ширины.

В Bootstrap 4 есть 5 адаптивных рядов (ну или брейкпоинтов), которые вы возможно заметили в предыдущем примере. (ie; col-lg-4 , col-md ).

Адаптивные брейкпоинты, основаны на ширине экрана:

(xs) — ширина экрана sm — ширина экрана ≥ 576px

md — ширина экрана ≥ 768px

lg — ширина экрана ≥ 992px

xl — ширина экрана ≥ 1200px

Почему я заключил ( xs ) в скобки, а не сделал как с другими брейкпоинтами? Так как xs это дефолтное прерывание, -xs инфикс, который использовался в Bootstrap 3, больше не используется в Bootstrap 4. Так что вместо col-xs-6 , просто col-6 .

Bootstrap использует медиа запросы из CSS, что установить адаптивные точки прерываний. Они дают вам возможность контролировать поведение колонок при разных размерах экрана.

Для примера: вот 2 колонки, каждая шириной 50%:

сol-sm-6 означает использование 6 колонок из 12, то есть 50% ширины на типичных маленьких размерах экранов. Которые больше или равны 768px:

На экранах меньше, чем 768px, 2 колонки станут шириной 100% и встанут вертикально:

Это происходит, потому что (xs) по дефолту или подразумевает брейкпоинт. Так как я не указывал дефолтную ширину колонки, 50% ширина была применена только на 768px и шире для sm брейкпоинта.

Mobile-first!

Так как (xs) это дефолтный брейкпоинт, то подразумевает col-12 . Следовательно:

Работает так же, как и:

xs (default) > переписывает sm > переписывает md > переписывает lg > переписывает xl

Или в обратном порядке… xl > переписывает lg > переписывает md > переписывает sm > переписывает (xs)

Следовательно, col-sm-6 реально означает 50% ширины на мелких и выше дисплеях. Для одинаковой ширины колонок на всех брейкпоинтах, просто выставите ширину для самого маленького ряда как хотите:

Для разной ширины колонки на разных уровнях, используйте подходящие брейкпоинты для перезаписи мелких прерываний. Для примера, 3 колоночная ширина на sm и 4 колоночная ширина на md и выше:

Auto-layout колонки в Bootstrap 4 также работают адаптивно. Из-за их простоты, теперь я предпочитаю использовать их, а не классические элементы 12 колонок. Auto-layout колонки идеальны для любых сценариев шаблонов, где необходима равная ширина колонок. Но не забудьте, что 12-ти колоночные юниты могут быть смешаны при необходимости.

Давайте посмотрим на auto-layout сетку.

Итак, 3 равные колонки. ‘ col ’ остаются горизонтальным на всей широте и не встают вертикально, так как xs прерывание дефолтно:

3 равные колонки, адаптивные. В этом примере, ‘ col ’ остаются горизонтальным до прерывания sm на 576px, а затем они становятся вертикальными. Помните, что вы можете заменять sm на каком угодно брейкпоинте( md , lg , xl ), если нужно:

2 колонки, левый сайдбар. А вот пример комбинирования классически определнной ширины колонок с колонками auto-layout. Правая колонка будет автоматически расти, чтобы занять ширину, так как мы используем auto-layout .col . Сайдбар будет 16.6% ширины на больших экранах и затем встанет над контентом при sm брейкпоинте с 576px:

3 колонки, правый сайдбар (сокращение, чтобы уместиться): В этом примере есть левый сайдбар, центральная область контента и правый сайдбар, который сокращается по ширине, чтобы подстроиться под свой контент.

Ключевые моменты адаптивного дизайна используемые в сетке Bootstrap 4:

Колонки встанут вертикально и станут шириной во весь экран на устройствах с маленьким разрешением, если вы не используете col-* класс в HTML разметке. Используйте col-* для предотвращения такого вертикального выстраивания.

Классы сеток поменьше, также применяются на больших экранах, пока не перепишутся конкретно под ширину большего экрана. Следовательно,

Строки (row) —имеют display: flex и следовательно колонки имеют равную высоту в одном и том же ряду. Используйте auto-margin или Flexbox align-item и justify-content для горизонтального или вертикального выравнивания.

Источник