web-dev-qa-db-ja.com

Twitter Bootstrap - ページのトップコンテンツをブロックするトップナビゲートバー

私はこのTwitter Bootstrapコードを持っています

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

しかし、ページの先頭を表示しているときに、ナビゲーションバーがページの上部近くにあるコンテンツの一部をブロックしています。コンテンツをナビゲーションバーでブロックされないようにするには、ページの上部が表示されているときにコンテンツの残りの部分を下にプッシュする方法について何か考えがありますか。

twitter-bootstrap
282
GeekedOut

CSSに追加してください。

body { 
    padding-top: 65px; 
}

ブートストラップドキュメントから ：

本文の上部にパディングを追加しない限り、固定ナビゲーションバーは他のコンテンツをオーバーレイします。

230
Akuta

レスポンシブブートストラップを使用している場合は、そのようなパディングを追加するだけでは不十分です。この場合、ウィンドウのサイズを変更すると、ページ上部とナビゲーションバーの間に隙間ができます。適切な解決策は次のようになります。

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}
357
Spajus

ブートストラップ3では、ナビゲーションバーを常に表示する必要がない限り、navbar-static-topの代わりにnavbar-fixed-topクラスを使用することでこの問題を回避できます。

139
gtrak

あなたの参考のためのはるかに便利な解決策、それは私のプロジェクトのすべてで完璧に動作します：

から最初の 'div'を変更

<div class='navbar navbar-fixed-top'>

に

<div class="navbar navbar-default navbar-static-top">
58
catsky

私はこの問題を解決するためにjQueryを使っています。これはBS 3.0.0のスニペットです：

$(window).resize(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);        
});
17
Aram Paronikyan

私の本当の固定ナビゲーションバーの直前にダミーの非固定ナビゲーションバーを作成することに成功しました。

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

間隔はすべての画面サイズでうまく機能します。

9
Jason Butler

MVC 5チュートリアル から派生した私のプロジェクトでは、ボディパディングを変更しても効果がないことがわかりました。以下は私のために働いた：

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

ナビゲーションバーが2行または3行に折り畳まれるケースを解決します。これは、本文body {margin：0;}の後の任意の場所にあるbootstrap.cssに挿入できます。 }

7
PiersB

ブートストラップv4 スターターテンプレートcss は次のものを使用します。

body {
  padding-top: 5rem;
}
5
Martijn Burger

Twitterの この例 で見られるように、レスポンシブスタイル宣言を含む行の前にこれを追加します。

<style> 
    body {
        padding-top: 60px;
    }
</style>

そのようです：

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
4
Nabil Kadimi

withnavbar navbar-defaultすべて問題なく動作しますが、navbar-fixed-topを使用している場合は、カスタムスタイルボディを含める必要があります。 {padding-top：60px;}それ以外の場合は、下のコンテンツがブロックされます。

2
Eldiyar Talantbek

percentageを使用することはpixelsよりはるかに良い解決策です。

body {
  padding-top: 10%; //This works regardless of display size.
}

@spajusによる別の回答で述べたように、必要ならば、あなたはまだ別のbreakpointsを追加することによって明示的になることができます。

1
Abhilash

ここで2つの問題が起こります。

  1. ページロード（コンテンツ非表示）
  2. このような内部リンクは一番上までスクロールし、ナビゲーションバーによって隠されます。
<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

ブートストラップ4（内部ページリンクあり）

1）を修正するために、Martijn Burgerが前述したように、ブートストラップv4スターターテンプレートcssは次のものを使用します。

body {
  padding-top: 5rem;
}

2）修正するには、この問題をチェックしてください。このコードはほとんどうまくいきます（しかし同じハッシュの2回目のクリックではうまくいきません）：

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

このコードはjQueryを使ってAリンクをアニメーション化します（細いjQueryではありません）。

  // inline theme global code here
  $(document).ready(function() {
    var body = $('html,body'), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })
1
Michael Cole

私が修正した方法であるMVC 5を使用するには、次の行を追加して、他のファイルの後にロードされた自分のSite.cssを追加するだけでした。body{padding: 0}

そして、_Layout.cshtmlの先頭のコードを次のように変更しました。

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">
1
Ultroman the Tacoman

追加する必要があります

 #page 
 { 
   padding-top: 65px
 }

スティッキーフッターなどを破壊しないようにする

0
Sebastian Viereck

ハードコーディングの高さとブレークポイントを含まない、これまでに見つけた最善の解決策は、マークアップに<nav...タグを追加することです。

<nav class="navbar navbar-expand-md" aria-hidden="true">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

このようにすることで、@mediaブレークポイントが同じになり、高さが同じになります（navbar-brandがnavbarで最も高いオブジェクトである場合、非fixed-top navbar。

これが失敗するのは、2つのnavbar-brand要素を表示するスクリーンリーダーの場合です。これは、その要素がスクリーンリーダーに表示されないようにするnot-for-srクラスの必要性を示しています。ただし、そのクラスは存在しません https://getbootstrap.com/docs/4.0/utilities/screenreaders/

スクリーンリーダーの問題をaria-hidden="true"で補正しようとしましたが、 https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ のようですスクリーンリーダーがフォーカスモードにある場合、これがおそらく機能しないことを示すために、もちろん、実際に動作するために必要なのはこれだけです...

0
boatcoder
<div class='navbar' data-spy="affix" data-offset-top="0">

ナビゲーションバーが元々ページの一番上にある場合は、値を0に設定します。それ以外の場合は、data-offset-topの値をナビゲーションバーの上にあるコンテンツの値に設定します。

その間、cssを次のように修正する必要があります。

.affix{
  width:100%;
  top:0;
  z-index: 10;
}
0
web fan