如何删除导航栏项目和导航栏底部之间的间隙？

问题描述：

<!--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 我怎么能删除我的导航栏的底部，这种差距？

您需要发布完整的HTML和CSS的导航栏样式为我们重现该问题或重现它在http://jsfiddle.net – Huangism

有左侧的外部资源部分。当我们甚至无法看到问题时，您如何期待别人来帮助您 – Huangism

答

以下内容添加到你的CSS：

.navbar { 
    min-height: 0; 
}

这里是CodePen我设置： https://codepen.io/CapySloth/pen/LLQNEG

感谢您的快速回复！它的工作原理：D – Detoxical

很高兴我能帮到你！ –

答

我添加了基础知识，但似乎没有任何问题。

.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>

答

引导应用.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>

答

引导设置min-height: 50px为.navbar类。一个解决办法是设置min-height为零：

.navbar { 
    min-height: 0; 
}

如何删除导航栏项目和导航栏底部之间的间隙？

相关推荐