0

ナビゲーション バーのようにページ コンテンツと共にスクロールしないように、トップ ナビゲーション バーの下に div を配置する必要があります。

2 つ目のナビゲーション バーとして作成しようとしましたが、まだスクロールしているか、2 つのナビゲーション バーの上に空白の領域ができています。

これどうやってするの？

アップデート

このサンプルでは、​​緑色のバーがナビゲーション バーの上にありますが、ナビゲーション バーの下に配置する必要があります: http://jsfiddle.net/julianonunes/y8YqK/

緑のバーコード (以下のコード サンプル) をナビゲーション バーの前に移動すると、ナビゲーション バーによって非表示になります。

元：

<div class="navbar navbar-decoration navbar-fixed-top"></div>
<div class="navbar navbar-default navbar-remote navbar-fixed-top">
    <div class="navbar-header"> <a href="#" class="navbar-brand">Brand</a>

    </div>
</div>
4

3 に答える 3

0

すでにこれを試したことがあるかもしれませんが、2 番目の navbar の css に

position: fixed;

スタイルシートに追加したくない場合は、次のように div に配置できます。

<div style="position: fixed;"> </div>

よくわかりませんが、次のように display:block を追加する必要があるかもしれません:

<div style="position: fixed; display: block;"> </div>

Bootstrap では、html/css 内で次のロジックを使用します。

<div class="navbar" style="position: fixed; display: block;">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

私の最後の推測：

<div class="navbar" style="margin-top: 10px;">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

それらの作品の1つを願っています。

于 2013-11-10T14:52:07.043 に答える
0

Ok。問題は、2 番目の div に「navbar-fixed-top」が含まれており、画面の上部に接着されていることです。上部に固定するのではなく、メインのナビゲーション バーの下に固定するだけです。2 番目のナグの html を次のように変更します。

<div class="navbar navbar-default navbar-remote navbar-decoration ">

navbar-decoration クラスに追加します。

width: 100%
position: fixed;
于 2013-11-10T17:28:30.620 に答える