如何消除导航栏项目与导航栏底部之间的差距？

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是基本的bootstrap，这是我编辑的唯一类。

  .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

Bootstrap适用.navbar { min-height: 50px; }。只需使用min-height: 0;

覆盖该内容即可

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

.navbar {
  min-height: 0;
}

Answer 4

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;