The following is using bootstrap code version 4.
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/requests/get">File Request</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/requests/send">Send Files</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/history">History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/users">User Management</a>
</li>
</ul>
</div>
.navbar-toggleable-md .navbar-collapse {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
width: 100%;
justify-content: flex-end;
}
.navbar-toggleable-md .navbar-nav {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.mr-auto {
margin-right: auto !important;
}
I wanted to move the ul to the right, so I set justify-content: flex-end on .navbar-collapse. It didn't work at first until I removed .mr-auto.
I am wondering why margin-right: auto would have effect on justify-content?
