css - 带有链接的 Bootstrap 列表不与导航栏中的列表对齐

Question

我有一个从 CDN 加载 Bootstrap 的 base.html 文件，然后我在 base.css 中有一些自定义的 css 样式。然而，在导航栏中我有一些奇怪的垂直对齐方式，其中一种元素，.navbar-nav > li与 .navbar-nav > li > a 相比位于导航栏的顶部.我的 django html 模板如下所示:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="#"><img style="margin-top: -10px;" src={% static "classroom/images/vsb-logo.png" %}></a>
        </div>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li><a href={% url 'admin:index' %}>Admin</a></li>
        <li><a href={% url 'classroom:blocklist' %}>Classlist</a></li>
        <li><a href={% url 'classroom:random' %}>Randomize</a></li>
        <li>{{request.user.username}}</li>
        <li><a href={% url 'account_logout' %}>Log out</a></li>
    </ul>
  </div><!-- /.container-fluid -->
</nav>

我用 base.css 取代了 bootstrap css。但是，我找不到生成 <li>{{request.user.username}}</li> 的样式属性样式比带有 anchor 标签的链接高，例如 <li><a href={% url 'admin:index' %}>Admin</a></li>

我已经为两个选择器提供了以下样式，并且我在浏览器开发人员工具中检查了这两个选择器的样式是否相同:

.navbar-default .navbar-nav li,
.navbar-default .navbar-nav li a {
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0px;
    position: relative;
    display: block;
    box-sizing: border-box;
}

我可以破解这个并将我的用户名行更改为:

<li><a href="#">{{request.user.username}}</a></li>

但我想找出导致这种错位的原因。 Here is a live page with the problem

Answer 1

简短的回答

您的文本“Doug W”显示高于其兄弟对应部分( anchor 链接)的原因是因为您正在复合 padding-top:15px base.css 中的值。

base.css 第 20 行

.navbar-default .navbar-nav li, 
.navbar-default .navbar-nav li a {
    padding-top: 15px;
    ...
}

在这里，你基本上是在说，让你的每个导航栏 li 元素都有一个 15px 的 padding-top，如果它们里面有一个 anchor 链接，再次复合那个规则......但是这次在也有 anchor 链接。

Sense“Doug W”没有围绕它的 anchor 链接，它没有跟随两个 padding-top 调整。它仅受 padding-top:15px 影响对于 .navbar-default .navbar-nav li , 不 .navbar-default .navbar-nav li a .这就是“Doug W”脱颖而出的原因。

长答案

你有 3 个文件控制你的导航栏元素的 padding-top 比率:

第 266 行的 navbar.less - 来自 CDN

.navbar-nav>li>a {
    padding-top:10px
    ...
}

第 23 行的 navs.less - 来自 CDN

.nav>li>a {
    ...
    padding:10px 15px;
}

base.css 第 20 行 - 您的自定义样式表

.navbar-default .navbar-nav li, .navbar-default .navbar-nav li a {
    padding-top: 15px;
    ...
}

根据您提供的链接，您似乎关注 Doug W高于您的其他兄弟链接。尝试换行 Doug W在像这样的 anchor 元素中......

<a href="#">Doug W</a> 

或将其包装在 <p> 中像这样的元素...

<p>Doug W</p>

如果您决定将其包装在 <p> 中元素，将以下 CSS 规则集添加到您的样式表中:

.navbar-default .navbar-nav li p {
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0px;
    position: relative;
    display: block;
    box-sizing: border-box;
}

或者只是这样做...

.navbar-default .navbar-nav li,
.navbar-default .navbar-nav li a,
.navbar-default .navbar-nav li p {
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0px;
    position: relative;
    display: block;
    box-sizing: border-box;
}

总而言之，当涉及到元素、 anchor 链接和文本字段的放置和位置时，使用 CSS 来控制它。不要留下任何未包装或未拿到的东西。