Question

我尝试使用引导程序制作一个合适的导航栏。

我试图在中心制作一个徽标，其余的在左右两侧制作。当前的解决方案是不干净的，我要求您提出一个解决方案，如何解决。

问题：徽标到左/右对象的长度不相同，并且徽标居中位置也不完美。 [Navbar] [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-->

引导导航栏徽标在中心，项目在左侧和右侧

2 个答案: