Question

我正试图让我的导航栏正确折叠。我右边有三个链接，当我的导航栏崩溃时它会消失。相反，它们覆盖了我想要在崩溃时出现的链接。有什么建议吗？

这是我的代码：

       <div class="navbar navbar-default navbar-fixed-top" role="navigation">
         <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
        <a href= "#" class="navbar-brand">XYZ</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav pull-left">
            <li><a href="#">Home</a></li>
            <li><a href="index.html#/projects">Projects</a></li>
            <li><a href="index.html#/finance">Finance</a></li>
            <li><a href="index.html#/resume">Resume</a></li>
       </ul>

       <ul class="nav navbar-nav navbar-right">
          <li><a href="http://www.linkedin.com/in/XYZ" class="icon-large icon-linked-in"></a> </li>
          <li><a href="http://www.twitter.com/XYZ78" class="icon-large icon-twitter"></a></li>
          <li><a href="http://www.github.com/XYZ" class="icon-large icon-github"></a></li>
       </ul>
    </div>
  </div>

####更新代码，但图标在覆盖内容的新行上崩溃#######

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
     </button>
        <a href= "#" class="navbar-brand"><a><img src="img/lior.jpeg"></a>
  </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">

             <li><a href="#">Home</a></li>
             <li><a href="index.html#/projects">Projects</a></li>
             <li><a href="index.html#/finance">Finance</a></li>
             <li><a href="index.html#/resume">Resume</a></li>
         </ul>
         <div style="float:right">
          <ul class="nav navbar-nav navbar-right hidden-xs hidden-md">
             <li><a href="http://www.linkedin.com/in/st" class="icon-large icon-linked-in"></a></li>
             <li><a href="http://www.twitter.com/s" class="icon-large icon-twitter"></a></li>
             <li><a href="http://www.github.com/s" class="icon-large icon-github"></a></li>
          </ul>
        </div>
    </div>
  </div>

Answer 1

最简单的方法似乎是使用http://getbootstrap.com/css/#responsive-utilities。对于正确的导航（图标），请使用：

 <ul class="nav navbar-nav navbar-right hidden-xs hidden-md">

这会在导航栏折叠时隐藏图标。

另请阅读：Bootstrap 3 Multiple Nav bar Menus

同一行中的两个导航栏使得崩溃无法正常工作。如何使右导航消失？

1 个答案: