使用Bootstrap折叠时将链接保留在导航栏中 [英] Keep links in navbar at collapsing using Bootstrap

问题描述

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

在展开视图中，并且:

在折叠视图中.

在普通视图中看起来还可以，但是在折叠视图中，我想保留在 Sign Up 链接栏中，并不要在折叠列表中 .这样的事情(此屏幕快照是在图形编辑器中创建的):

这是我的代码:

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

我发现了这篇文章，但折叠后的列表已损坏，某些链接左右移动.

如何实现折叠时将某些链接保留在导航栏中，以及如何将它们从列表中排除(以免重复)?

解决方案

只需将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品牌，只需在媒体查询@media(max-width:767px)中添加以下内容即可.

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

解决方案

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

这篇关于使用Bootstrap折叠时将链接保留在导航栏中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！