在Bootstrap 4中将导航栏品牌和链接与页面内容对齐

Question

I have a page designed in Bootstrap 4 which has one column in the center of the screen. How can I make my navbar-brand followed by nav-links be aligned so that the brand is aligned with the text on the page? The links should follow immediately to the right after the brand.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar fixed-top navbar-expand-md navbar-default"> <div class="navbar-brand mx-auto" style="font-size:35"> <b><a href="#" style="color:#DCDCDC; padding-left:0"> Grigory Yaroslavtsev</a> <font style="color:#DCDCDC">@</font><a href="http://caml.indiana.edu" style="color:#DCDCDC">IU CAML</a></b> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#papers">Papers</a> </li> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#talks">Talks</a> </li> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#teaching">Teaching</a> </li> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#personal">Personal</a> </li> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#links">Links</a> </li> </ul> </div> </nav> 

Answer 1

Edit-2. Adding the contents of the nav inside a div with class of container is what you're looking for. and using that you would put the remaining content inside another div with class container. Hope this solves it all. Edit- I thought you wanted the side links all the way to the right. This should be what you wanted.

Remove the mx-auto classes and add .justify-content-end to the navbar-collapse

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar fixed-top navbar-expand-md navbar-default"> <div class="container"> <div class="navbar-brand" style="font-size:35"> <b><a href="#" style="color:#DCDCDC; padding-left:0"> Grigory Yaroslavtsev</a> <font style="color:#DCDCDC">@</font><a href="http://caml.indiana.edu" style="color:#DCDCDC">IU CAML</a></b> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#papers">Papers</a> </li> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#talks">Talks</a> </li> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#teaching">Teaching</a> </li> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#personal">Personal</a> </li> <li class="nav-item"> <a class="nav-link" style="font-size:25; color:#DCDCDC" target="_self" href="#links">Links</a> </li> </ul> </div> </div> </nav>