Ответы пользователя по тегу Bootstrap
  • Почему бутстрап неадекватно располагает элементы?

    @ned4ded
    Верстка, Фронтенд
    добрый день, я сначала хотел написать подробный ответ, но...

    проблема не в bs, прочитайте, пожалуйста, эти инструкции:
    https://getbootstrap.com/docs/4.3/layout/grid/ - про сетку,
    https://getbootstrap.com/docs/4.3/components/forms/ - про разметку форм,
    https://getbootstrap.com/docs/4.3/layout/utilities... - утилиты для лейаута

    все остальные проблемы должны отпасть сами собой.
    Ответ написан
    3 комментария
  • Как сделать автоматическое выравнивание блоков bootstrap по центру?

    @ned4ded
    Верстка, Фронтенд
    В общем, бутстрап 3 имеет свои неприятные особенности, выравнивание колонок - одна из них. Он написан на флоатах (в отличии от 4 версии) и единственное, что может помочь - это, пожалуй, динамиечское присвоение классов через js или на бэке. Это неприятный костыль, но флоатам нельзя просто так взять и напсиать: эй ты держись в середке.

    В чем суть: вам нужен js который при загрузке страницы будет считать количество загруженных элементов в каталоге. Если число кратно 3 - все огонь. Если остатаются 2 элемента, то предпоследнему элементу присваивается класс col-*-offset-2, если остается 1 элемент, то последнему элементу - col-*-offset-4. Офсеты добавляют margin слева любой колонке, имитируя нахождение n-го количества колонок слева от него.
    Вместо звездочки * - брейкпоинт (зависит от вашей сетки). По семантике работают как обычные колонки.

    Второй вариант: делать не через оффсеты, а через изменение класса колонки.
    Т.е. в случае двух элементов - col-*-6, в случае 1 - col-*-12
    Ответ написан
  • Как применить фон ко всей странице сайта?

    @ned4ded
    Верстка, Фронтенд
    Добрый день!

    К сожалению, бесшевно подогнать такой фон невозможно, тому есть объективные причины:

    1) Ваш фон имеет неравномерный параметр inner shadow.
    2) Высота секций отличается друг от друга, фон каждый секции будет обрезаться в рандомном, непредсказуемом месте (bg-size: cover);
    3) Видно, что фон на картинке заканчивается не в том месте паттерна, в котором начинается (т.е. если поставить две эти картинки друг на друга, то они не будут стыковаться).

    Что можно сделать? Вам придется поработать с изображением, я предполагаю, что вы владеете ps и он у вас установлен. И тут возможно два варианта развития событий:

    А) Простой. У вас в psd шаблоне картинка фона и <конуса-колуна + стикера> не объединены и вы можете ее экспортировать отдельно. Тогда вам нужно:
    а.1) Создать из фона паттерн. Делать это придется подбором, если дизайнер вам не подвез паттерна.
    а.2) Применить паттерн фона к body с bg-repeat: repeat. Если фон имеет "вклееную" внутреннюю тень, то не забудьте осветлить изображение, чтобы оно было идентично по цветовой политре середине bg, или создайте паттерн из середины (как будет удобнее);
    а.3) Наложить на каждую секцию inner shadow.

    Б) Сложный случай, если ваш фон с конус-колуном представлен единым, неразделенным файлом. Тогда вам нужно выполнить весь А и подбирать bg-position для body попиксельно. Любое увеличение высоты первой секции повлечен за собой появление шва. Но выбора особого у вас нет.

    PS bg-size: cover скалирует изображение, подгоняя его под размер блока. Это еще одна проблема, которая вызовет шев. Уберите cover, поставьте 100%; В этом случае без repeat у вас появятся пустые области сверху и снизу, прикрыть которые можно тем же паттерном, что я описал в пунктах А-Б.
    Ответ написан