我有一个带有链接的navbar: 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;
}
有人可以告诉我,为什么li不显示正确的话?这是我的网站链接
也许您必须集成所有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>
之后,您只是自定义位置徽标,创始人和联系人