javascript - 链接到不折叠的导航栏

Question

我想添加一个指向我的导航栏的链接，该链接将保持在右侧 - 即使在导航栏折叠后它也应该保持在右侧。当导航栏未折叠时我可以正常工作，但在它折叠后它会转到我不想要的下一行。
所以我的问题是如何在导航栏折叠后将链接保持在同一行。

到目前为止，这是我的代码:

    <!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<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>

        <a class="pull-right" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>

    <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>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

以及实际的代码:
https://jsfiddle.net/av1p3x69/

Answer 1

您可以在标题中保留链接的副本，然后可以使用 Bootstrap 的响应式实用程序类(如 hidden-xs、hidden-md)来切换可见性，如下所示。

<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
    <a class="pull-right hidden-md" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>
  <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>

    <a class="pull-right hidden-xs" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>

<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>
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</div>

检查更新的 fiddle here

其他方法是使用媒体查询，但我觉得这个更简单。谢谢。希望对您有所帮助。