使用 Bootstrap 将链接保留在导航栏中折叠

Question

我正在使用 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/

我找到了this post，但那里的折叠列表已损坏，一些链接左右移动。

如何在折叠时在导航栏中保留一些链接，以及如何将它们从列表中排除（以免重复它们）？

Answer 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;
}
}

<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>

要具有与导航链接相同的样式而不是导航栏品牌，只需将这个#sm-view {font-size: 14px;} 添加到您的媒体查询@media(max-width:767px)。