Меняем отступы сетки (gutter-width) в Bootstrap

Дефолтова сетка в bootstrap 3 имеет размер 30 пикс. Понятно, что рабочий макет может содержать произвольные отступы и, если вы хотите использовать преимущества работы с grid от бутстрапа, придется как то их менять и фиксить.

Фактически нужно сделать две вещи:

  • Изменить margin строки (.row);
  • Изменить padding столбцов (.col-*) этой строки.

Вариант на CSS

Я начал с поиска готового решения, и нашел CSS вариант, который позволял обнулить значения, когда это требуется (вариант без зазора между ячейками сетки).

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

То же, но для LESS/SASS

Если же вы используете препроцессоры LESS/SASS, то пример можно преобразовать в такой миксин, избавляющий вас от некоторой рутины:

Написать комментарий

Мало букафф? Читайте есчо !

Центровка по вертикали модального окна в Bootstrap

Май 5, 2017 г.

Модальные окна Bootstrap всем хороши, но имеют одну досадную недоработку - нет вертикальной центровки. Выглядит это недоразумение вот так: ...

Читать

Bootstrap - показ произвольного html контента подсказки в popover

Июнь 14, 2021 г.

Один из компонентов Bootstrap - popover - создаёт оформление и показывает текст подсказки при нажатии на контейнер. Рассмотрим более сложный кейс использования этого компонента, а именно, создание контента для popover на лету. Стандартный шаблон ...

Читать

 

Комментарии к «Меняем отступы сетки (gutter-width) в Bootstrap»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: