带有右对齐项目的引导导航栏

Question

I'm trying to align my navbar to the right in bootstrap 4.3.1. I want to have the navbar-brand on the right and navbar-item on the leftBut everything I try does not seem to work.

this is how it look right now i want to be like this

This is my code:

 <nav class="navbar navbar-expand-lg navbar-dark"> <div class="container"> <a class="navbar-brand" href="index.php"> <img src="image/logo.svg" width="30" height="30" class="d-inline-block align-top" style="filter: invert(1)" alt=""> my new website </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <?php $uri = $_SERVER['REQUEST_URI']; ?> <li class="nav-item <?= $uri == '/test.php'? 'active': ''?>"> <a class="nav-link" href="test.php">test</a> </li> <li class="nav-item <?= $uri == '/test.php'? 'active': ''?>"> <a class="nav-link" href="tset.php">test</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">other</a> <div class="dropdown-menu"> <a class="dropdown-item <?= $uri == '/test.php'? 'active': ''?>" href="test.php">test</a> <div class="dropdown-divider"></div> <a class="dropdown-item <?= $uri == '/test.php'? 'active': ''?>" href="stat.php">test</a> </div> </li> </ul> <ul class="navbar-nav my-2 my-lg-0" style="flex-direction: row;"> <li class="nav-item"> <a class="nav-link" style="padding-right: .5rem;padding-left: .5rem;" href="https://facebook.com" target="_blank"> <img src="images/facebook.svg" width="24" height="24" class="d-inline-block align-top" style="filter: invert(1)" alt=""> </a> </li> <li class="nav-item"> <a class="nav-link" style="padding-right: .5rem;padding-left: .5rem;" href="https://github.com" target="_blank"> <img src="images/github.svg" width="24" height="24" class="d-inline-block align-top" style="filter: invert(1)" alt=""> </a> </li> </ul> </div> </div> </nav>

Answer 1

Try adding d-flex flex-row-reverse to the nav's class. After that, you should try to change the order if there is something wrong (I think the images won't be in the right order). Also, I think you should put the .container div to the outside of your nav or even the whole page. Here's the bootstrap 4.4 doc about flex

Answer 2

Simply add style float:left and float:right for respective elements.