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

Fiddle: https://jsfiddle.net/aqgtmy6w/4/

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

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

Answer 1

只需将 sing up link 放在 <div class="navbar-header"> 中，然后将 class="navbar-brand pull-right" 添加到您的注册 link 中。就是这样。

工作代码段

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

要与 nav-links 具有相同的样式而不是像 navbar-brand 只需添加此--- #sm-view {font-size: 14px;} 到您的媒体查询 @media(max-width:767px).

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

Keep links in navbar at collapsing using Bootstrap

css

navbar

twitter-bootstrap