带有链接的引导列表不与导航栏中的列表对齐

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 取代了引导 css。但是，我找不到使<li>{{request.user.username}}</li> 样式高于带有锚标记的链接的样式属性，例如<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”看起来高于其兄弟对应部分（锚链接）的原因是因为您在 base.css 中复合了 padding-top:15px 值。

base.css 第 20 行

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

在这里，您实际上是在说，让您的每个 nav-bar li 元素都有一个 15px 的 padding-top，如果其中有一个锚链接，请再次复合该规则......但这次是在锚链接也是。

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

长答案

您有 3 个文件来控制导航栏项目的上边距比率：

navbar.less 在第 266 行 - 来自 CDN

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

第 23 行的 navs.less - 来自 CDN

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

base.css at line 20 - 你的自定义样式表

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

根据您提供的链接，您似乎担心Doug W 高于其他同级链接。尝试将文本 Doug W 包装在锚元素中，如下所示...

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

总之，当涉及到元素、锚链接和文本字段的放置和位置时，使用 CSS 来控制这一切。不要留下任何未包装或未获得的东西。