0

我试图让我的导航栏正确折叠。我在右侧有三个链接，当我的导航栏折叠时应该会消失。相反，它们覆盖了我希望在折叠时出现的链接。有什么建议么？

这是我的代码：

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

####UPDATED 代码，但图标在覆盖内容的新行上折叠#######

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

1 回答 1

0

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

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

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

另请阅读：Bootstrap 3 多个导航栏菜单

于 2013-09-11T19:50:59.983 回答