Navbarの項目とNavbarの下部の間のギャップを削除するにはどうすればよいですか？

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に以下を追加します。 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; }が適用されます。

.navbar { 
    min-height: 0; 
} 

ここで私が設定CodePenです。ただ、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

とブートストラップが.navbarクラスのmin-height: 50pxを設定することを上書きします。解決策はゼロにmin-heightを設定するために、次のようになります。

.navbar { 
    min-height: 0; 
}