Question

我有一个包含链接的导航栏：Notes, About, Brand(logo), Founder, Contact。当我去一个较小的屏幕（移动）并打开汉堡包菜单时，只有2个左边的li（Notes, About）出现，而右边的li（创始人，合同）只是消失了。这是我的代码。

HTML

<div class="row">
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        ☰
    </button>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Notes</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand mx-auto" href="#"><img src="assets/img/logo.png" alt="Dark Note Logo" class="logo"></a>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Founder</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>
</div>
<div class="row note-row">
    <textarea rows="4" cols="50" placeholder="Type note here..." class="col-lg-10 col-md-10 col-sm-12 col-xs-12 notes" id="main_panel"></textarea>
</div>

CSS

body {
    background-image: url("../img/curls.png");
}
#main_panel {
    margin: 0 auto;
    margin-top: 20px;
    height: 50em;
    display: block;
    margin-top: 90px;
}
.note-row {
    margin-left: 0;
    margin-right: 0;
}

.logo {
    height: 50px;
}
.notes {
    background-attachment: local;
    background-image:
        linear-gradient(to right, white 10px, transparent 10px),
        linear-gradient(to left, white 10px, transparent 10px),
        repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
    line-height: 31px;
    padding: 8px 10px;
}

有人可以告诉我为什么没有正确的李？这是我的网站DarkNote

的链接

Answer 1

也许您必须整合所有nav-item，例如：

<ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Notes</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="navbar-brand mx-auto" href="#"><img src="assets/img/logo.png" alt="Dark Note Logo" class="logo"></a>
        </li>

             <li class="nav-item">
            <a class="nav-link" href="#">Founder</a>    
            </li>
            <li class="nav-item" >
            <a class="nav-link" href="#">Contact</a></li> 


    </ul>

之后，您只需自定义位置徽标，创建者和联系人

Navbar汉堡菜单不显示正确的li项目

1 个答案: