我正在使用Bootstrap创建一个负责任的导航栏。现在看起来像:
在展开视图中,并且:
在已折叠视图中。
在普通视图中它看起来没问题,但是在折叠视图中,我想留在栏中注册链接并且没有它折叠列表。像这样的东西(这个截图是在图形编辑器中创建的):
这是我的代码:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
</ul>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</nav>
&#13;
小提琴:https://jsfiddle.net/aqgtmy6w/4/
我找到了this post但是折叠列表中断了,有些链接左右移动。
如何在折叠中保留导航栏中的某些链接,以及如何从列表中排除它们(以便不复制它们)?
答案 0 :(得分:1)
只需将sing up
链接放在<div class="navbar-header">
内,然后将class="navbar-brand pull-right"
添加到您的注册链接中。那就是它。
工作代码段
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@media(min-width:768px){
#sm-view {
display:none;
}
}
@media(max-width:767px){
#lg-view {
display:none;
}
#sm-view {
font-size: 14px;
}
}
&#13;
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
<a id="sm-view" class="navbar-brand pull-right" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="lg-view"><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
</ul>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</nav>
&#13;
要获得与导航链接相同的样式,而不像导航栏品牌,只需将此#sm-view {font-size: 14px;}
添加到您的媒体查询@media(max-width:767px)
。