中心的 Bootstrap 導航欄徽標和左側和右側的項目

Question

我嘗試用引導程序制作一個合適的導航欄。

我試着在中間做一個標志，其余的在左邊和右邊。 當前的解決方案是不干凈的，我向您請教，如何解決它。

問題：從徽標到左/右對象的長度不同，並且徽標未完美居中。 [導航欄][1]

當前的 html：

    <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
   <div class="container">
     <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarMenu">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item"><a href="#" class="nav-link">Status</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Download</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
      </ul>
      <a class="navbar-brand" href="#">
        <img src="/img/helmet.png" height="100" with="50" alt="">
      </a>
      <ul class="navbar-nav mr-auto">
         <li class="nav-item"><a href="#" class="nav-link">Teamspeak Bot</a></li>
         <li class="nav-item"><a href="/places/" class="nav-link">Travel</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Plex</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
       </ul>
     </div>
   </div>
 </nav>

CSS

.collapse.navbar-collapse ul{
   margin: auto;
}
.navbar-brand {
  position: absolute;
  top: 0;
  left: 50%;
  text-align: center;
  margin: auto;
  font-size: 36px;
}

.bg-dark {
   background:transparent !important;
   background-image: url("/img/navbar.png") !important;
   min-height: 70px;
}

Answer 1

將第二個標簽上的類更改為 ml-auto，因為右側窗格必須與左側的邊距對齊。 這應該解決它。

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
   <div class="container">
     <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
   <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarMenu">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item"><a href="#" class="nav-link">Status</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Download</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
      </ul>
      <a class="navbar-brand" href="#">
        <img src="/img/helmet.png" height="100" with="50" alt="">
      </a>
      <ul class="navbar-nav ml-auto"> <!-- change here -->
         <li class="nav-item"><a href="#" class="nav-link">Teamspeak Bot</a></li>
         <li class="nav-item"><a href="/places/" class="nav-link">Travel</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Plex</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
       </ul>
     </div>
   </div>
 </nav>

Answer 2

您可以使用pull-right類將項目與右側對齊，但需要進行更多修改才能正常工作。我已經使用您提供的鏈接創建了一個干凈的解決方案。享受！

 body { background-color: blueviolet !important; } .navbar { position: relative; top:10px; } .brand { position: absolute; left: 50%; margin-left: -50px !important; display: block; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <!--If you want to add background image add it to the class below--> <div class="container-fluid"><!--add this line--> <div class="row"><!--add this line--> <div class="col-md-12"><!--add this line--> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="brand" style="margin: 0; float: none;" href="#"> <!--add logo source--> <img src="icon.png" alt="logo" title="logo" height="100" with="50" /> </a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a href="#" class="nav-link">Status</a></li> <li class="nav-item"><a href="#" class="nav-link">Download</a></li> <li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li> <li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li> </ul> <ul class="navbar-nav pull-right"> <li class="nav-item"><a href="#" class="nav-link">Teamspeak Bot</a></li> <li class="nav-item"><a href="#" class="nav-link">Travel</a></li> <li class="nav-item"><a href="#" class="nav-link">Plex</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </div> </nav> </div><!--add this line--> </div><!--add this line--> <!--New Row for the main content--> <div class="row"> <div class="col-md-12"> <!--Main content--> </div> </div> </div><!--add this line-->