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

Question

私はこのTwitterブートストラップコードを持っています

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

しかし、ページの先頭を表示しているとき、ナビゲーションバーがページの上部にあるコンテンツの一部をブロックしています。コンテンツがナビゲーションバーによってブロックされないように、ページの上部が表示されたときに残りのコンテンツを下に押し下げる方法についてのアイデアはありますか？

score 378 · Accepted Answer

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

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

score 283 · Accepted Answer

CSSに追加します。

body { 
    padding-top: 65px; 
}

Bootstrapドキュメントから：

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

score 147 · Accepted Answer

ブートストラップ3の場合、ナビゲーションバーを常に表示する必要がない限り、navbar-static-top代わりにクラスがこの問題を防ぎます。navbar-fixed-top

score 62 · Accepted Answer

参照用のはるかに便利なソリューションであり、私のすべてのプロジェクトで完璧に機能します。

最初の'div'をから変更します

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

に

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

score 17 · Accepted Answer

私はこの問題を解決するためにjQueryを使用しています。これはBS3.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);        
});

score 9 · Accepted Answer

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行に折りたたまれている場合を解決します。これは、行の本文の後のどこでもbootstrap.cssに挿入できます{margin：0; }

score 9 · Accepted Answer

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

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

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

score 7 · Accepted Answer

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

body {
  padding-top: 5rem;
}

score 4 · Accepted Answer

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

score 3 · Accepted Answer

を使用することpercentageは、よりもはるかに優れたソリューションですpixels。

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

breakpoints必要に応じて、別の回答で述べられているように、別のものを追加することで明示的にすることができます@spajus

score 2 · Accepted Answer

編集：このソリューションは、navbar-inverseクラスとnavbar-static-topクラスが利用できない新しいバージョンのBootstrapでは実行できません。

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

score 2 · Accepted Answer

navbar navbar-defaultを使用すると、すべてが正常に機能しますが、navbar-fixed-topを使用している場合は、カスタムスタイルのbody {padding-top：60px;}を含める必要があります。そうしないと、下のコンテンツがブロックされます。

score 2 · Accepted Answer

ここでは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（スリムjQueryではない）を使用してAリンクをアニメーション化します。

  // 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);
    });
  })

score 2 · Accepted Answer

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

これが失敗するのは、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/は、スクリーンリーダーがもちろん、実際に機能するために必要なのはフォーカスモードだけです...

score 1 · Accepted Answer

追加する必要があります

#page {
  padding-top: 65px
}

粘着性のあるフッターなどを破壊しないように

score 0 · Accepted Answer

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

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

その間、あなたはそのcssように修正する必要があります：

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

score 0 · Accepted Answer

0

これを追加：

.navbar {
  position: relative;
}

于 2019-11-24T09:29:38.543 に答える

score 0 · Accepted Answer

.stick-topcssパディングを追加せずに、スクロールしたときにナビゲーションバーを上部に固定するのと同じ仕事をするものを使用できます

<div class="container-fluid mt-3">
  <nav class="navbar navbar-expand-sm bg-white navbar-light sticky-top pt-0">
    <a class="navbar-brand" href="/">
      <img src="/images/logo-full.png" alt="logo" width="150">
    </a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
      </li>
    </ul>
  </nav>
  <div class="row">
     .....
  </div>
</div>

score -1 · Accepted Answer

JSに追加：

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});

score -2 · Accepted Answer

画面の解像度に基づいてマージンを設定できます

@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;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}

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

20 に答える 20

内部ページリンク付きのブートストラップ4

Related

Reference