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">的末尾之间有一个神秘的空白区域。前者的高度为106px，而后者的高度为100px，但没有边框，边距或填充。如何对齐它们？

由于

修改

我已添加 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。

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: