Bootstrap zawijanie wiersza

Question

Mam taki kod:

<style>
.nav-item
{
	background-color: #101030;
	color: white;
	padding: 20px;
	text-align: center;
}
</style>
.
.
.

<header>
	<nav class="navbar navbar-expand-md">

		<ul class="navbar-nav col-md-12">
			<li class="nav-item col-md-6 col-lg-3 mr-2">OPCJA 1</li>
			<li class="nav-item col-md-6 col-lg-3 mr-2">OPCJA 2</li>
			<li class="nav-item col-md-6 col-lg-3 mr-2">OPCJA 3</li>
			<li class="nav-item col-md-6 col-lg-3">OPCJA 4</li>
		</ul>
	
	</nav>
	</header>

.
.
.

Dlaczego gdy zmniejszam ekran do wielkości md to nav-item'y nie układają się po 2 w 2. rzędach tylko wciąż 4 w 1. rzędzie? Gdy użyje class container i row to cały wygląd menu na całą szerokość ekranu się sypie.

Answer 1

Gdy użyje class container i row to cały wygląd menu na całą szerokość ekranu się sypie.

To są obowiązkowe klasy dla grid bootstrap więc nie powinno się sypać. to raczej marginesy (mr-2), które dodałeś psują układ.

A dlaczego nie korzystasz z komponentu navbar?

Comments

Gdzie "wcisnąć" te klasy?

---

Proszę o uzasadnienie minusa.

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system.