Сетка bootstrap + попиксельная вёрстка + адаптивность, не могу разобраться с размерами блоков

@ziga45 · Регистрация: 02.11.2015

Студворк — интернет-сервис помощи студентам

Пытаюсь скрафтить себе шаблон из psd для сайта портфолио, сначала сверстал без сетки бутстрапа, и начал настраивать там шрифты и блоки под разные разрешения экрана вроде бы получалось, но приходилось очень много изменять элементов в шаблоне под каждые разрешения экрана с интервалом по 100 пикселей, и всё равно на некоторых разрешения было то криво то не так, одно поменяешь, другое слетит.
Плюсы такой вёрстки были то что всё было поппиксельно как на psd всё совпадало(ну то что мне надо было).

Узнал о бутстрап и решил заново сверстать шаблон через сетку, сразу видно что будет легче настроить под все разрешения, но я не могу понять теперь как мне сделать что бы все блоки совпадали как на псд, т.е пиксельперфект был?. Вот скрин сетки (самого контента не считая шапки):

Сетка bootstrap + попиксельная вёрстка + адаптивность, не могу разобраться с размерами блоков

Ну разделил сайдбар - col-md-2, дальше мини блок с картинкой тоже col-md-2 и большой блок с картинкой col-md-6 и ещё мини блок col-md-2.
Всё работает как часики, все блоки стоят правильно:

За исключением что все блоки не имеют точную ширину, потому что у них стоит fluid т.е они в процентах.
Мне надо что бы мини блоки с картинкми были шире на 100 пикселей, а большой блок с картинкой был меньше, с такими размерами портится весь дизайн.
Не могу понять тогда как верстать правильно ....

@Karssen · 03.11.2015, 22:47

На бутстрапе пиксель перфект вряд ли получится.

@Almag13 · 03.11.2015, 22:50

может макет не под бустрап ... сетки нет и размеры соответственно иные...

@ziga45 · 03.11.2015, 23:06 **[ТС]**

типа вообще нет ни каких вариантов, т.е можно забить на сетку и тупо под каждое разрешение пилить свой размер блоков?

@Karssen · 03.11.2015, 23:11

http://itchief.ru/lessons/boot... containers Вариант 1
http://itchief.ru/lessons/boot... y-platform Вариант 2, можно создать сборку со своим количеством контейнеров и соотвественно другие размеры будут у них

@ziga45 · 03.11.2015, 23:15 **[ТС]**

Karssen, спасибо за ссылки обязательно гляну может смогу сделать что хочу

@Almag13 · 04.11.2015, 00:46

Ну вот ширину контейнеров можно под себя подстроить... Если только так...

@ziga45 · 04.11.2015, 13:07 **[ТС]**

Всё работает как надо, сделал как указано тут http://itchief.ru/lessons/boot... containers

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@ziga45 0 / 0 / 0 Регистрация: 02.11.2015 Сообщений: 4

	Сетка bootstrap + попиксельная вёрстка + адаптивность, не могу разобраться с размерами блоков 03.11.2015, 22:23. Показов 2280. Ответов 7 Метки нет (Все метки) Пытаюсь скрафтить себе шаблон из psd для сайта портфолио, сначала сверстал без сетки бутстрапа, и начал настраивать там шрифты и блоки под разные разрешения экрана вроде бы получалось, но приходилось очень много изменять элементов в шаблоне под каждые разрешения экрана с интервалом по 100 пикселей, и всё равно на некоторых разрешения было то криво то не так, одно поменяешь, другое слетит. Плюсы такой вёрстки были то что всё было поппиксельно как на psd всё совпадало(ну то что мне надо было). Узнал о бутстрап и решил заново сверстать шаблон через сетку, сразу видно что будет легче настроить под все разрешения, но я не могу понять теперь как мне сделать что бы все блоки совпадали как на псд, т.е пиксельперфект был?. Вот скрин сетки (самого контента не считая шапки): Ну разделил сайдбар - col-md-2, дальше мини блок с картинкой тоже col-md-2 и большой блок с картинкой col-md-6 и ещё мини блок col-md-2. Всё работает как часики, все блоки стоят правильно: За исключением что все блоки не имеют точную ширину, потому что у них стоит fluid т.е они в процентах. Мне надо что бы мини блоки с картинкми были шире на 100 пикселей, а большой блок с картинкой был меньше, с такими размерами портится весь дизайн. Не могу понять тогда как верстать правильно .... 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	03.11.2015, 22:47
	На бутстрапе пиксель перфект вряд ли получится. 0

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	03.11.2015, 22:50
	может макет не под бустрап ... сетки нет и размеры соответственно иные... 0

@ziga45 0 / 0 / 0 Регистрация: 02.11.2015 Сообщений: 4
	03.11.2015, 23:06 [ТС]
	типа вообще нет ни каких вариантов, т.е можно забить на сетку и тупо под каждое разрешение пилить свой размер блоков? 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	03.11.2015, 23:11
	Сообщение было отмечено ziga45 как решение Решение http://itchief.ru/lessons/boot... containers Вариант 1 http://itchief.ru/lessons/boot... y-platform Вариант 2, можно создать сборку со своим количеством контейнеров и соотвественно другие размеры будут у них 1

@ziga45 0 / 0 / 0 Регистрация: 02.11.2015 Сообщений: 4
	03.11.2015, 23:15 [ТС]
	Karssen, спасибо за ссылки обязательно гляну может смогу сделать что хочу 0

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	04.11.2015, 00:46
	Ну вот ширину контейнеров можно под себя подстроить... Если только так... 0

@ziga45 0 / 0 / 0 Регистрация: 02.11.2015 Сообщений: 4
	04.11.2015, 13:07 [ТС]
	Всё работает как надо, сделал как указано тут http://itchief.ru/lessons/boot... containers 0

Сетка bootstrap + попиксельная вёрстка + адаптивность, не могу разобраться с размерами блоков

Решение