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

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

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

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

Вариант на CSS

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

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

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

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

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

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

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

Май 5, 2017 г.

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

Читать

Шпаргалка по размеру сетки bootstrap v3 и v4

Апрель 6, 2019 г.

Для тех кто использует с 3ю и 4ю версии бутстрапа и постоянно забывает размеры сетки (grid). Здесь приведены таблицы для сетки по-умолчанию (в общем ...

Читать

 

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

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



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