html - 导航栏上的 Bootstrap(数据切换)下拉菜单未显示为 block

Question

出于某种原因，当我单击煎饼按钮时，我已经能够使用 z-index 将菜单显示为一个 block ，但显示在菜单的元素列表上。所以“ block ”不是整个导航栏，而只是列出其他页面链接的部分，我不确定为什么。我曾尝试深入研究 CSS 并使用 block 元素，但没有成功。

这是导航栏的 html:

<nav class="navbar navbar-default">

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target=".navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/hug/">Hug a Tree</a>
</div>
<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav pull-right">
        <li><a href="{% url 'about' %}">about</a></li>

        {% if user.is_authenticated %}
        <li><a href="{% url 'profile' %}">profile</a></li>
        <li><a href="{% url 'favourites' %}" class="fav">f<span style="color:#e48666">a</span>vourites</a></li>
        <li><a href="{% url 'logout' %}">logout</a></li>


        {% else %}
        <li><a href="{% url 'register' %}">register</a></li>
        <li><a href="{% url 'login' %}">login</a></li>

        {% endif %}
    </ul>
</div>
</nav>

还有CSS:

.navbar-default {
  background-color: #fff;
  border-color: #e9e7b6;
  margin: 25px;
  height: 100px;
}


.navbar-default .navbar-text {
 font-family: 'Raleway', sans-serif;
}


.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  font-family: 'Raleway', sans-serif;
    color: #5aa47d;

}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  font-family: 'Raleway', sans-serif;
    color: #5aa47d;

}
.navbar-default .navbar-link {
  font-family: 'Raleway', sans-serif;
  color: #5c606b;
}
.navbar-default .navbar-link:hover {
  font-family: 'Raleway', sans-serif;
    color: #5aa47d;
}

.navbar-toggle {
    margin-top: 33px;
}


ul.nav.navbar-nav.pull-right{
z-index: 2;
position: relative;
}


.nav.navbar-nav.pull-right li{
display: block;
z-index: 1;
background-color: #fff;
}

/*** navbar - icon ***/

img.brand {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }


/*** navbar - brand/logo ***/

.navbar-default .navbar-brand{
  font-family: 'Oswald', sans-serif;
  float: left;
  color: #426085;
  padding: 35px 15px 0px 25px;
  height: 50px;
  font-size: 30px;
  line-height: 25px
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{
color: #5aa47d;

}



/*** navbar - list ***/

.navbar-default .navbar-nav > li > a {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  color: #5c606b;
}


.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:active {
font-family: 'Raleway', sans-serif;
  color: #5aa47d;
}


.navbar-nav>li>a {
        padding-top: 39px;
        padding-right: 20px;
 }

任何见解都会很棒。

谢谢。

Answer 1

我想这就是你想要做的jsfiddle

pull-right 从 v3.1.0 开始被弃用并替换为 navbar-right。