0

ナビゲーションバーを正しく折りたたもうとしています。右側に 3 つのリンクがあり、ナビゲーション バーが折りたたまれると消えるはずです。代わりに、折りたたみ時に表示したいリンクをオーバーレイします。助言がありますか？

これが私のコードです：

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

1 に答える 1

0

最も簡単な方法は、 http://getbootstrap.com/css/#responsive-utilitiesを使用するようです。正しいナビゲーション (アイコン) には、次を使用します。

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

これにより、ナビゲーション バーが折りたたまれているときにアイコンが非表示になります。

また読む: Bootstrap 3 Multiple Nav bar Menus

于 2013-09-11T19:50:59.983 に答える