Косяки дизайна под Bootstrap и нет понимая как с ними бороться

У сетки бутстрап есть косяк. У нее 6 колонок 67 пикселей, другие 6 - 68. А когда ты выставляешь все колонки 68 то ты получаешь 1146 пикселей, что неверно по технологии. Ну и она не попадает в 4 пиксельную сетку и неудобна для пиксель перфект. Естественно, речь про стандартную сетку, без использования настроек.

Как рисовать под Bootstrap?

Есть Bootstrap v4 Сетка для Figma. Изучите сетку, чтобы получить ответы на свои вопросы.

Спецификация:
3 Основных сетки

  • Mobile 375 4-col
  • Tablet 768 6-col
  • Desktop 1440 12-col

6 Сеток

  • Mobile 375 2-col
  • Mobile 375 4-col
  • Tablet 600 6-col
  • Tablet 768 6-col
  • Tablet 1024 12-col
  • Desktop 1440 12-col

Максимальная ширина контейнера

  • 375px
  • 540px
  • 720px
  • 960px
  • 1140px

Шрифт: Roboto

Ссылка на Figma файл

1 симпатия

Сорри, не удержался)

Вот так не нужно делать:

1 симпатия

Лучший способ рисовать под бутстрап — это не рисовать под бутстрап. Понимаю, вопрос стоит несколько другой, но данную сетку легко заменить кастомной, если погуглить как вообще работают сетки.

То, что бутстрап не сочетается с 4px сеткой — это не баг, а фича. В целом две эти сетки выполняют различные цели и нет никакого смысла их пытаться объединить. Но их можно использовать вместе, распределив весь контент под использование той или иной сетки и складывая полученный результат в общую композицию.

П.С. Сетка создаётся под контент, а контент пихается в сетку.

Это моя сетка бутстрапа. Приятно когда твои поделки расходятся интернетом и становятся популярными :relieved:

4 симпатии

https://grid.kkuistore.com/ - сетки на все случаи жизни.

1 симпатия