Question

我有一个base.html文件，可从CDN加载Bootstrap，然后在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，如果其中有一个锚定链接，则再次复合该规则...但是这次是也可以锚定链接。

Sense“ Doug W”周围没有锚链，这两个填充顶部调整都不跟上。 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行的无导航-来自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包裹在锚元素中，例如...

<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对其进行控制。不要留下任何未包装的东西。

Answer 2

您的未对准问题是由.navbar-nav>li>a CSS规则引起的。它有一个padding: 15px，由于它不是锚标记，因此未应用于第4个元素。您可以尝试移动该CSS规则以应用于所有列表项，例如.navbar-nav>li

具有链接的引导程序列表与导航栏中的列表不对齐

2 个答案: