Keep links in navbar at collapsing using Bootstrap

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/43023627/keep-links-in-navbar-at-collapsing-using-bootstrap

标签

css

twitter-bootstrap

navbar