删除 nav navbar-nav 下面的 Bootstrap 空格

Question

我正在尝试删除我的菜单和以下部分之间的引导空白。我的菜单 HTML 是：

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="navbar-brand">
                    <li><a href="/"><img src="{% static 'img/apps-png.png' %}" width="150px" alt="appsrfun logo" /></a></li>
                </ul>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                  <li><a href="{% url 'home' %}">Home</a></li>
                  <li><a href="{% url 'home' %}">Mobile Apps</a></li>
                  <li><a href="{% url 'home' %}">Android</a></li>
                  <li><a href="{% url 'home' %}">Apple</a></li>
                  <li><a href="{% url 'home' %}">Download</a></li>
                  <li><a href="{% url 'home' %}">Tags</a></li>
                </ul>
            </div>
        </div><!-- .container -->
    </nav>

如果我检查每个元素，底部边框、填充和边距都设置为 0px。在<div class="collapse navbar-collapse" id="myNavbar"> 的结尾和<ul class="nav navbar-nav"> 的结尾之间有一个神秘的空白。前者显示高度为 106 像素，而后者显示 100 像素，但没有边框、边距或内边距。如何对齐它们？

谢谢

编辑

我已包含我的 CSS 以删除引导程序标准边距和填充

/* Navbar */
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar .nav > li > a:link, .navbar .nav > li > a:visited {
    color: #f7931e;
    height: 100px;
    padding-top: 40px;
    margin-bottom: 0px;
}

.navbar .nav > li > a:hover, .navbar .nav > li > a:active {
    background-color: #f7931e;
    color: #ffffff;
    border-bottom: 6px solid #ffff01;
}

.navbar {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.navbar-brand {
    list-style-type: none;
    margin-bottom: 0px;
}

.navbar-default {
    background-color: transparent;
}

Answer 1

可能与 vertical-align 有关。尝试将 vertical-align:middle 设置为 .navbar .navbar-nav。

编辑：通常当你的元素具有不同的垂直对齐值时会发生这种情况。我不知道其余代码的 CSS 是什么，但是 elementA 与 vertical-align:middle 和 elementB vertical-align:baseline。

例子：

.container{min-height:80px;width:100%;background:#333;}
.box1{background:#eee;width:40px;height:40px;display:inline-block;vertical-align:middle;}
.box2{background:red;width:100px;height:100px;display:inline-block;}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

将 vertical-align:middle 设置为 .box2，将解决问题。