Почему я должен использовать W-100 на Row on Bootstrap 4

Question

В моем проекте контейнер жидкий и занимает полную ширину. Но ряд после этого занимает только около 60%.

Изображения

Контейнер:

Ряд:

Почему это происходит при использовании примеров документации Bootstrap, когда строка имеет полную ширину? Img для контекстуализации:

Answer 1

Краткий ответ:

Не используйте сетку Bootstrap 4 row> col внутри Navbar.

Navbar предназначен для содержания только поддерживаемого контента , а не сетки. Используйте служебные классы , чтобы выровнять или установить ширину для содержимого Navbar по желанию. Поскольку отображается панель навигации: дочерние элементы flex будут следовать правилам flexbox.

Пояснение:

"Почему это происходит при использовании примеров документации Bootstrap строка на всю ширину? "

Поскольку в документации не используется строка> col внутри флексбокс Navbar.

Когда вы используете container-fluid внутри Navbar, это display:flex, который использует align-items:flex-start по умолчанию. Это приводит к тому, что row прилипает к левой стороне (flex-start), и он не растянется до полной ширины, если ширина: 100% (w-100) не используется на row.