在Bootstrap 4中將導航欄品牌和鏈接與頁面內容對齊

Question

我有一個在Bootstrap 4中設計的頁面，該頁面在屏幕中央有一列。 如何使我的導航欄品牌及其后的導航鏈接對齊，以使品牌與頁面上的文字對齊？ 鏈接應緊跟品牌之后的右側。

 <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

編輯-2。 您正在尋找的是在具有類容器的div中添加導航的內容。 並使用它會將剩余的內容放入帶有類容器的另一個div中。 希望這能解決所有問題。 編輯-我認為您一直想要右側的側面鏈接。 這應該是您想要的。

刪除mx-auto類，然后將.justify-content-end添加到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>