Bootstrap 4: Як зробити так, щоб Navbar залишався у контейнері та не розтягувався?

Є багато способів змусити фіксовану панель навігації залишатися всередині батьківського divконтейнера. Ми розглянемо найпростіший тут.

Уявіть, що у вас є такий код, дещо змінений у документах Bootstrap:

Navbar  
  • Home (current)
  • Link
  • Link
hello
div.next { background-color: lightblue; width: 100%; height: 60rem; }

А ваша сторінка виглядає так:

Рішення

Незважаючи на те, що в документах написано "Навбари та їх вміст за замовчуванням текучі. Використовуйте додаткові контейнери, щоб обмежити їх горизонтальну ширину", найпростішим рішенням є використання CSS для прямого встановлення ширини навігаційної панелі:

div.next { background-color: lightblue; width: 100%; height: 60rem; } .container { padding: 0px; } nav.navbar { width: inherit; top: 0%; left: 50%; transform: translateX(-50%); }

Додавши правила націлювання .containerі nav.navbar, ваша панель навігації тепер має таку ж ширину, як батьківський контейнер: