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

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

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

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

Вариант на CSS

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

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

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

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

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

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

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

Май 5, 2017 г.

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

Читать

Меняем поведение корневого пункта меню bootstrap dropdown

Апрель 14, 2022 г.

В bootstrap корневой пункт меню с подпунктами (dropdown menu) не является активной ссылкой и лишь служит кнопкой для развертывания подпунктов. Тем временем ...

Читать

 

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

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



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