0

Web サイトに固定ナビゲーション バーを配置したいのですが、水平方向の動作に問題があります。

「レスポンシブ」にせず、十分な大きさのウィンドウがあれば、すべて問題ありません。 ここに画像の説明を入力

しかし、ウィンドウを縮小しようとすると、一番右の項目が非表示になるナビゲーション バーを除いて、以下のすべてのコンテンツがスクロール可能になります。 ここに画像の説明を入力

これは、私が望んでいる動作ではありません。すべてのナビゲーションバーの要素にアクセスしたいだけです。

次に、固定ナビゲーション バーのためだけにレスポンシブ レイアウトを使用しようとしました。ウィンドウを縮小すると、すべて問題ないようです。 ここに画像の説明を入力

しかし、コンテンツを水平にスクロールすると、ナビゲーション バーが非常に美的ではないように見えます。 ここに画像の説明を入力

私の質問は、レスポンシブ レイアウトを改善する方法はありますか? 「縮小モード」のときにナビゲーションバーを移動するJavaScriptについて考えていました。すでにテスト済みのソリューションはありますか? それ以外の場合: 応答しない固定ナビゲーションバーの解決策はありますか?

ありがとう！

更新：これが私のコードです

<div id="main-navbar" class="navbar navbar-fixed-top">
  <div class="navbar-inner collapsed">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="http://www.lifeparticipation.org/liquid.html" target="_blank">
        <div><img class="logo" id="logo" src="styles/imgs/logo.png"></div>
      </a>      

      <ul class="nav pull-right">
        <% if(typeof userName === "undefined"){ %>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user accedi"></i> Accedi <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#" class="loginFacebook"><span class="facebook">&nbsp;</span>facebook</a></li>                 
            </ul>
        </li>
        <% } else{ %>                                        
        <li class="dropdown" style="">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style=""><img style="height: 30px" class="img-rounded" src="<%=userPicURL %>" style=""> <%=userName %> <b class="caret" style="margin-top: 13px; padding-top: 0px;"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#" class="logout"><i class="icon-off"></i> Esci</a></li>                 
            </ul>
        </li>        
        <% } %>                             
      </ul><!-- <ul class="nav pull-right"> -->          
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
        <ul class="breadcrumb">
            <li><a href="#">Museo</a></li> 
        </ul>        
        </ul>
        <ul class="nav pull-right">   
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="styles/imgs/flags/it.png"> <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><img src="styles/imgs/flags/it.png"> Italiano</a></li>
                    <li><a href="#"><img src="styles/imgs/flags/es.png"> Castellano</a></li>
                    <li><a href="#"><img src="styles/imgs/flags/galicia.png"> Galego</a></li>                    
                    <li><a href="#"><img src="styles/imgs/flags/pt.png"> Português europeu</a></li>                                        
                    <li><a href="#"><img src="styles/imgs/flags/eu.png"> English</a></li>                    
                </ul>
            </li>                                        
        </ul>
      </div><!--<div class="nav-collapse collapse">--> 
    </div><!--<div class="container">-->
  </div>
</div>

そして、これらの 2 つの画像は、レスポンシブなナビゲーション バーとレスポンシブでないコンテンツで何が起こるかを少しよく表しています。

スクロールせずに。 すべて問題ないようです

水平方向にスクロールするとすぐに、このアンチ美的動作に気付きます。 バンズはなんて痛いんだ！

問題を再現しようとする JSFiddle はこちらから入手できます

4

2 に答える 2

0

わかりました、やったようです。

ブートストラップレスポンシブ CSS の CSS ステートメントを単純にオーバーフローさせました。

.navbar-fixed-bottom {
    position: fixed;
}

今、ナビゲーションバーは私が望むように動作します。もちろん、小さな落とし穴があります: 折りたたまれたナビゲーション バーを展開すると、ページの通常の流れの一部がカバーされますが、私はかなり大きな画面サイズ (タブレット、PC、およびすぐ）。誰かがよりスマートでより良い解決策を見つけたら、私はそれを見てうれしいです:-)

于 2013-07-08T22:17:02.380 に答える
0

bootstrap-responsive.cssレスポンシブ ナビゲーションバーが正しく機能するためには、含める必要があります。

これは、BootstrapCDN からの結合された Bootstrap CSS を使用した更新です: http://jsfiddle.net/PRVt6/1/

于 2013-07-08T19:38:33.203 に答える