太多空间

Question

我如何使它所以项目（菜单，关于我们等）在整个导航栏都被均匀地隔开，而不是揉成一边？

https://jsfiddle.net/dd19sg5x/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<nav class="navbar navbar-default"> 
    <div> 
     <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar">a</span> 
     <span class="icon-bar">b</span> 
     <span class="icon-bar">c</span> 
     </button> 
     <img src="images\logo.png" href="main_page.html" width=75% height=75% alt="Company Logo of Broadstairs Hotel" href="www.google.com"/> 

     </div> 
     <div class="collapse navbar-collapse container" id="bs-nav-demo"> 
           <ul class="nav navbar-nav" id="top-navbar"> 
       <li><a href="html\book.html">Book</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Enquire</a></li> 
       <li><a href="#">Facillities</a></li> 
       <li><a href="#">Rooms</a></li> 
       <li><a href="#">Contact us</a></li> 



    <!-- Navbar stuff is done --> 

     </div> 
    </div> 
</nav> 

Answer 1

我的嘴跟.navbar-header设置为一个固定的宽度取决于您的标志宽度，使其position: absolute;。我已将其设置为200px;。比.navbar-collapse的padding-left将是200px;之后，如果你有6级的菜单项，多个项目应该是完全16.666%宽。

看到它在这里的行动：https://jsfiddle.net/9ts0Lcxe/

在CSS中添加的代码是：

@media (min-width: 768px) { 
    .navbar .navbar-header { 
     position: absolute; 
     left: 0; 
     top: 0; 
     width: 200px; 
    } 

    .navbar .navbar-collapse { 
    width: 100%; 
    padding-left: 200px; 
    } 

    .navbar .navbar-collapse .navbar-nav { 
    width: 100%; 
    } 

    .navbar .navbar-collapse .navbar-nav > li { 
    width: 16.666%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    } 
} 

Answer 2

这应该工作

@media (min-width: 992px) { 
 
    ul.navbar-nav { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 100% 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 

 

 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="nav-brand"><img src="images\logo.png" href="main_page.html" width=75% height=75% alt="Company Logo of Broadstairs Hotel" href="www.google.com"/></a> 
 
    <div class="collapse navbar-collapse" id="navbarNav"> 
 
    <ul class="navbar-nav"> 
 
     <li class="nav-item"><a class="nav-link" href="html\book.html">Book</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="#">Enquire</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="#">Facillities</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="#">Rooms</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="#">Contact us</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>