使用Bootstrap保持导航栏中的链接折叠

时间:2017-03-26 00:37:16

标签: css twitter-bootstrap navbar

我正在使用Bootstrap创建一个负责任的导航栏。现在看起来像:

enter image description here

展开视图中,并且:

enter image description here

已折叠视图中。

在普通视图中它看起来没问题,但是在折叠视图中,我想留在栏中注册链接并且没有它折叠列表。像这样的东西(这个截图是在图形编辑器中创建的):

enter image description here

这是我的代码:



@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;
&#13;
&#13;

小提琴:https://jsfiddle.net/aqgtmy6w/4/

我找到了this post但是折叠列表中断了,有些链接左右移动。

如何在折叠中保留导航栏中的某些链接,以及如何从列表中排除它们(以便不复制它们)?

1 个答案:

答案 0 :(得分:1)

只需将sing up链接放在<div class="navbar-header">内,然后将class="navbar-brand pull-right"添加到您的注册链接中。那就是它。

工作代码段

&#13;
&#13;
@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;
&#13;
&#13;

要获得与导航链接相同的样式,而不像导航栏品牌,只需将此#sm-view {font-size: 14px;}添加到您的媒体查询@media(max-width:767px)