Блок row на flexbox bootstrap-5 центрирует вложенные блоки, но они все равно находятся не по центру

Рейтинг: 1Ответов: 1Опубликовано: 05.03.2023

Всем здравствуйте!

Я специализируюсь на python-бэкенд разработке. Но сейчас делаю свой первый full-stack проект, и поэтому только начинаю углубляться в HTML и CSS.

Вот мой HTML-код

<body class="d-flex flex-column min-vh-100 justify-content-center overflow-y-scroll">
    <div class="container my-5">
        <div class="row d-flex justify-content-center">
             <div class="col-lg-8 col-xl-9 col-md-12 col-sm-12 col-12">
                  <div class="card border-0 mx-0 px-0 col-12">
             ....
             <div class="col-lg-4 col-xl-3">
             ....

При этом есть аналогичная структура на другой странице но с размером блока col-lg-4 и там все хорошо центрируется. На экранах от 1500 до 1000 отступ от блока до края экрана справа в 2 раза больше, чем слева. На экранах от меньше 1000 и до 570 блок оказывается вообще не центрируется и оказывается прижатым к левому краю экрана, а справа очень много пустого места остается. Меньше 570 - выглядит корректно, но там и мобильная версия подключается вместо адаптива.

Второй блок в ряду показывается пользователям с определенными правами и только на ПК. На планшетах и смартфонах его замещает другой элемент. Неровное центрирование происходит независимот от того, показывается ли второй блок или нет.

Если задать контейнеру отступы mx-5 это немного корректирует и выглядит не так критично на экранах от 1000 до 1500, но это не решает проблему и на экранах больше 1500 выглядит не очень хорошо, чем больше экран - тем хуже выглядит.

Буду благодарен любому ответу!

css html bootstrap
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Решил вопрос, задав родительскому блоку container свойство min-width: 100%