I have a problem with me and ms classes, im learning how to create navbar and in this situation the elements one and two should work with ms class(be left-aligned) and elements three and four should work with me class(be right-aligned), but instead it works as centered:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav">
<a href="#" class="navbar-brand">Company Name</a>
</div>
<ul class="navbar-nav ms-auto">
<li><a class="nav-link" href="#">Element one</a></li>
<li><a class="nav-link" href="#">Element two</a></li>
</ul>
<ul class="navbar-nav me-auto">
<li><a class="nav-link" href="#">Element three</a></li>
<li><a class="nav-link" href="#">Element four</a></li>
</ul>
</nav>
How it works: image
How it should work: image
CodePudding user response：
I strongly urge you read up how .me-auto and .ms-auto works in Bootstrap 5. See the documentation on Auto margins here.
Bootstrap 5 uses the new CSS Logical Properties and Values which I also urge you to read up.
TLDR
.ms-auto(margin-inline-start: auto) ≈.ml-auto(margin-left: auto).me-auto(margin-inline-end: auto) ≈.mr-auto(margin-right: auto)
Now that's (hopefully) settled, setting a margin-left: auto on an element (in a flex container) will align the element to the right, not left. The opposite is true for margin-right: auto. So it isn't working the wrong way!
Navbar using auto margins
This is how you'll correctly implement the spaced-apart layout using auto-margins (You actually did it correctly in the first version of your question).
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li><a class="nav-link" href="#">Element one</a></li>
<li><a class="nav-link" href="#">Element two</a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li><a class="nav-link" href="#">Element three</a></li>
<li><a class="nav-link" href="#">Element four</a></li>
</ul>
</div>
</div>
</nav>Navbar using justify-content
You can also achieve the same effect by adding .justify-content-lg-between to the parent .collapse class. This basically sets justify-content: space-between on screen sizes above the mobile (lg) breakpoint. I feel this is a better way to implement the intended layout but it's good to know both.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-lg-between"
id="navbarNav"
>
<ul class="navbar-nav">
<li><a class="nav-link" href="#">Element one</a></li>
<li><a class="nav-link" href="#">Element two</a></li>
</ul>
<ul class="navbar-nav">
<li><a class="nav-link" href="#">Element three</a></li>
<li><a class="nav-link" href="#">Element four</a></li>
</ul>
</div>
</div>
</nav>