Saya punya kode Bootstrap Twitter ini

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

Tetapi ketika saya melihat awal halaman, bilah nav memblokir beberapa konten yang ada di dekat bagian atas halaman. Adakah ide untuk membuatnya menekan sisa konten lebih rendah ketika bagian atas halaman dilihat sehingga konten tidak diblokir oleh bilah navigasi?

Tambahkan ke CSS Anda:

body { 
    padding-top: 65px; 
}

Dari dokumentasi Bootstrap :

Navbar tetap akan overlay konten Anda yang lain, kecuali jika Anda menambahkan padding ke bagian atas tubuh.

Menambahkan padding seperti itu tidak cukup jika Anda menggunakan bootstrap responsif. Dalam hal ini ketika Anda mengubah ukuran jendela Anda, Anda akan mendapatkan celah antara bagian atas halaman dan navbar. Solusi yang tepat terlihat seperti ini:

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

Untuk bootstrap 3, kelas navbar-static-topbukannya navbar-fixed-topmencegah masalah ini, kecuali jika Anda memerlukan navbar untuk selalu terlihat.

solusi yang jauh lebih berguna untuk referensi Anda, ini berfungsi sempurna di semua proyek saya:

ubah 'div' pertama Anda dari

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

untuk

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

Saya menggunakan jQuery untuk mengatasi masalah ini. Ini cuplikan untuk 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);        
});

Saya sudah sukses dengan membuat nav bar non-fix dummy tepat sebelum nav bar tetap saya yang sebenarnya.

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

Spasi bekerja dengan baik pada semua ukuran layar.

Dalam proyek saya yang berasal dari tutorial MVC 5 saya menemukan bahwa mengubah bantalan tubuh tidak berpengaruh. Berikut ini bekerja untuk saya:

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

Ini menyelesaikan kasus di mana navbar dilipat menjadi 2 atau 3 baris. Ini dapat dimasukkan ke dalam bootstrap.css di mana saja setelah baris body {margin: 0; }

Bootstrap v4 template starter css menggunakan:

body {
  padding-top: 5rem;
}

Seperti terlihat pada contoh ini dari Twitter, tambahkan ini sebelum baris yang menyertakan deklarasi gaya responsif:

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

Seperti itu:

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

dengan navbar navbar-default semuanya berfungsi dengan baik, tetapi jika Anda menggunakan navbar-fix-top Anda harus memasukkan custom style body {padding-top: 60px;} jika tidak, ia akan memblokir konten di bawahnya.

Dua masalah akan terjadi di sini:

1. Memuat halaman (konten disembunyikan)
2. Tautan internal seperti ini akan bergulir ke atas, dan disembunyikan oleh navbar:

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

Bootstrap 4 w / tautan halaman internal

Untuk memperbaiki 1), seperti yang dikatakan Martijn Burger di atas, css template starter bootstrap v4 menggunakan:

body {
  padding-top: 5rem;
}

Untuk memperbaiki 2) lihat masalah ini . Sebagian besar kode ini berfungsi (tetapi tidak pada klik kedua hash yang sama):

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

Kode ini menjiwai tautan A dengan jQuery (bukan slim 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);
    });
  })

Solusi terbaik yang saya temukan sejauh ini, yang tidak melibatkan ketinggian dan breakpoint pengkodean yang sulit adalah menambahkan <nav...tag tambahan ke markup.

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

Dengan melakukannya dengan cara ini @mediabreakpoint identik, tingginya identik (asalkan Anda navbar-brandadalah objek tertinggi di navbartetapi Anda dapat dengan mudah mengganti elemen lain di non fixed-topnavbar.

Di mana ini gagal adalah dengan pembaca layar yang sekarang akan menyajikan 2 navbar-brandelemen. Ini menunjukkan perlunya not-for-srkelas untuk mencegah elemen tersebut muncul untuk pembaca layar. Namun kelas itu tidak ada https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Saya telah mencoba untuk mengkompensasi masalah pembaca layar dengan aria-hidden="true"tetapi https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ tampaknya menunjukkan ini mungkin tidak akan berfungsi ketika pembaca layar dihidupkan. dalam mode fokus yang tentu saja satu-satunya saat Anda benar-benar membutuhkannya untuk bekerja ...

menggunakan percentageadalah solusi yang jauh lebih baik daripada pixels.

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

Jika perlu Anda masih bisa eksplisit dengan menambahkan berbeda breakpointsseperti yang disebutkan dalam jawaban lain oleh@spajus

EDIT: Solusi ini tidak dapat digunakan untuk versi Bootstrap yang lebih baru, di mana kelas atas navbar-inverse dan navbar-static-top tidak tersedia.

Menggunakan MVC 5, cara saya memperbaiki tambang, adalah dengan menambahkan Site.css saya sendiri, dimuat setelah yang lain, dengan baris berikut: body{padding: 0}

dan saya mengubah kode di awal _Layout.cshtml, menjadi:

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

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

Jika navbar Anda ada di bagian atas halaman, atur nilainya menjadi 0. Jika tidak, tetapkan nilai untuk data-offset-topnilai konten di atas navbar Anda.

Sementara itu, Anda perlu memodifikasi css:

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

Tambahkan ini:

.navbar {
  position: relative;
}

Anda harus menambahkan

#page {
  padding-top: 65px
}

untuk tidak menghancurkan footer lengket atau sesuatu yang lain

Tambahkan ke JS Anda:

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

Anda dapat mengatur margin berdasarkan resolusi layar

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