如何刪除導航欄項目和導航欄底部之間的間隙？

Question

<!--NAVBAR--> 
      <nav class="navbar navbar-inverse"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </div> 
        <div class="collapse navbar-collapse" id="myNavbar"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Home</a></li> 
          <li><a href="#">Page 1</a></li> 
          <li><a href="#">Page 2</a></li> 
          <li class="navfixborder"><a href="#">Page 3</a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 

而我的CSS，CSS是基本的引導程序，這些是我編輯過的唯一類。

.navbar-nav { 
    margin: 0; 
    text-align: center; 
    font-size: .9em; 
    width:100%; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-family: Roboto, 'Open Sans', Arial; } 
    .navbar-nav > li { 
    float: none; 
    display: inline-block; 
    margin-left: -5px; 
    border-left: 2px solid #333240; 

    } .navbar-nav > li > a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-right: 45px; 
    padding-left: 45px; } 

Navbar gap image 我怎麼能刪除我的導航欄的底部，這種差距？

Answer 1

以下內容添加到你的CSS：

.navbar { 
    min-height: 0; 
} 

這裏是CodePen我設置： https://codepen.io/CapySloth/pen/LLQNEG

Answer 2

我添加了基礎知識，但似乎沒有任何問題。

.navbar-nav { 
 
    margin: 0; 
 
    text-align: center; 
 
    font-size: .9em; 
 
    width:100%; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    font-family: Roboto, 'Open Sans', Arial; } .navbar-nav > li { 
 
    float: none; 
 
    display: inline-block; 
 
    margin-left: -5px; 
 
    border-left: 2px solid #333240; 
 

 
    } .navbar-nav > li > a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-right: 45px; 
 
    padding-left: 45px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-inverse"> 
 
      <div class="container"> 
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle" data toggle="collapse" data-target="#myNavbar"> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
       </div> 
 
       <div class="collapse navbar-collapse" id="myNavbar"> 
 
        <ul class="nav navbar-nav"> 
 
         <li class="active"><a href="#">Home</a></li> 
 
         <li><a href="#">Page 1</a></li> 
 
         <li><a href="#">Page 2</a></li> 
 
         <li class="navfixborder"><a href="#">Page 3</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </nav>

Answer 3

引導應用.navbar { min-height: 50px; }。只是簡單地覆蓋與min-height: 0;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style> 
 
.navbar-nav { 
 
    margin: 0; 
 
    text-align: center; 
 
    font-size: .9em; 
 
    width: 100%; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    font-family: Roboto, 'Open Sans', Arial; 
 
} 
 
.navbar-nav > li { 
 
    float: none; 
 
    display: inline-block; 
 
    margin-left: -5px; 
 
    border-left: 2px solid #333240; 
 
} 
 
.navbar-nav > li > a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-right: 45px; 
 
    padding-left: 45px; 
 
} 
 

 
.navbar { 
 
    min-height: 0; 
 
} 
 
</style> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data toggle="collapse" data-target="#myNavbar"> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li class="navfixborder"><a href="#">Page 3</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 4

引導設置min-height: 50px爲.navbar類。一個解決辦法是設置min-height爲零：

.navbar { 
    min-height: 0; 
}