我正在使用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>
小提琴： https ： //jsfiddle.net/aqgtmy6w/4/
我找到了这个帖子，但是折叠列表中断了，一些链接左右移动。
如何在导航栏中保留折叠中的某些链接，以及如何从列表中排除它们（以便不复制它们）？
I'm creating a responsible navigation bar using Bootstrap. Now it looks like:
in expanded view, and:
in collapsed view.
In the normal view it looks okay, however in collapsed view I'd like to keep in the bar Sign Up links and not to have it in the collapsed list. Something like this (this screenshot was created in graphical editor):
This is my code:
@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>
Fiddle: https://jsfiddle.net/aqgtmy6w/4/
I found this post but collapsed list there is broken, some links shifted left and right.
How can I achieve keeping some links in navbar on collapsing, and how to exclude them from list (so that not to duplicate them)?
最满意答案
只需将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;
}
}
<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>
要像导航链接一样具有相同的样式，而不是像navbar-brand那样只需将这个--- #sm-view {font-size: 14px;}到您的媒体查询@media(max-width:767px) 。
Just put the sing up link inside <div class="navbar-header"> and add class="navbar-brand pull-right" to your sign up link. That's it.
Working Snippet
@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;
}
}
<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>
To have same styling as the nav-links and not like the navbar-brand just add this--- #sm-view {font-size: 14px;} to your media query @media(max-width:767px).
更多推荐
class,折叠,电脑培训,计算机培训,IT培训"/> <meta name="description" co
发布评论