css - 删除 nav navbar-nav 下方的 Bootstrap 空白

Question

我正在尝试删除我的菜单和后续部分之间的 Bootstrap 空白。我的菜单 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"> 的结尾.前者的高度为 106px，而后者的高度为 100px，但都没有边框、边距或填充。如何对齐它们？

谢谢

编辑

我包含了我的 CSS 以删除 Bootstrap 标准边距和填充

/* 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。

编辑: 当您的元素具有不同的 vertical-align 值时，通常会发生这种情况。我不知道其余代码的 CSS 是什么，但是元素 A 带有垂直对齐:中间和元素 B 垂直对齐:基线。

例子:

.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，将解决问题。