如何消除导航栏项目与导航栏底部之间的间隙？答案

【问题标题】：How can i remove the gap between my navbar items and the bottom of the navbar?如何消除导航栏项目与导航栏底部之间的间隙？
【发布时间】：2017-06-29 15:52:21
【问题描述】：

<!--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，以便我们重现该问题或在jsfiddle.net上重现它
左侧有一个外部资源部分。当我们甚至看不到问题时，您希望人们如何帮助您

标签： html css navigation navbar

【解决方案1】：

将以下内容添加到您的 CSS：

.navbar {
  min-height: 0;
}

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

【讨论】：

很高兴能为您提供帮助！

【解决方案2】：

Bootstrap 应用 .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>

【讨论】：

【解决方案3】：

Bootstrap 为 .navbar 类设置了 min-height: 50px。一个解决方案是将min-height 设置为零：

.navbar {
  min-height: 0;
}

【讨论】：

【解决方案4】：

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

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

【讨论】：