Bu Twitter Bootstrap koduna sahibim

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

Ancak sayfanın başlangıcını görüntülerken gezinme çubuğu sayfanın üst kısmına yakın olan içeriğin bir kısmını engelliyor. İçeriğin gezinme çubuğu tarafından engellenmemesi için sayfanın üst kısmı görüntülendiğinde içeriğin geri kalanını nasıl aşağıya indireceğine dair bir fikriniz var mı?

CSS'nize ekleyin:

body { 
    padding-top: 65px; 
}

Gönderen Bootstrap docs :

Vücudun üstüne dolgu eklemediğiniz sürece, sabit gezinme çubuğu diğer içeriğinizin üzerine yerleşecektir.

Duyarlı önyükleme kullanıyorsanız böyle bir dolgu eklemek yeterli değildir. Bu durumda, pencerenizi yeniden boyutlandırdığınızda sayfanın üst kısmı ile gezinme çubuğu arasında bir boşluk olur. Doğru bir çözüm şöyle görünür:

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

Önyükleme 3 için, gezinme çubuğunun her zaman görünür olması gerekmedikçe sınıf navbar-static-topyerine navbar-fixed-topbu sorunu önler.

referans için çok daha kullanışlı bir çözüm, tüm projelerimde mükemmel çalışıyor:

ilk 'div'inizi

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

için

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

Bu sorunu çözmek için jQuery kullanıyorum. BS 3.0.0 için snippet:

$(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);        
});

Gerçek sabit gezinme çubuğumun hemen önünde kukla sabit olmayan bir gezinti çubuğu oluşturma konusunda iyi bir başarı elde ettim.

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

Aralık, tüm ekran boyutlarında harika çalışır.

MVC 5 eğitiminden türetilen projemde vücut dolgusunun değiştirilmesinin bir etkisi olmadığını gördüm. Aşağıdakiler benim için çalıştı:

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

Gezinme çubuğunun 2 veya 3 hatta katlandığı durumları çözer. Bu, bootstrap.css dosyasına satır gövdesinden sonra herhangi bir yere eklenebilir {margin: 0; }

Bootstrap v4 başlangıç ​​şablonu css şunları kullanır:

body {
  padding-top: 5rem;
}

Twitter'daki bu örnekte görüldüğü gibi , duyarlı stil bildirimlerini içeren satırın önüne ekleyin:

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

Şöyle ki:

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

ile navbar navbar-varsayılan herşey yolunda çalışır, ancak kullanıyorsanız navbar-sabit-top size özel stil vücudu eklemek zorunda {padding-top: 60px;} aksi takdirde içerik derini engeller.

Burada iki sorun olacak:

1. Sayfa yükleme (içerik gizlendi)
2. Bunun gibi dahili bağlantılar en üste kayar ve gezinme çubuğu tarafından gizlenir:

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

Dahili sayfa bağlantıları içeren Bootstrap 4

1), Martijn Burger'in yukarıda dediği gibi, bootstrap v4 başlangıç ​​şablonu css şunları kullanır:

body {
  padding-top: 5rem;
}

Düzeltmek için 2) bu sorunu kontrol edin . Bu kod çoğunlukla çalışır (ancak aynı karma öğenin 2. tıklamasında değil):

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

Bu kod, jQuery (ince jQuery değil) ile A bağlantılarını canlandırır:

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

Şimdiye kadar bulduğum en iyi çözüm, sabit kodlama yükseklikleri ve kesme noktaları içermiyor <nav..., işaretlemeye ekstra bir etiket eklemektir .

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

Bu şekilde @mediakesme noktaları aynıdır, yükseklik aynıdır ( navbar-brandşunun içindeki en uzun nesne olması koşuluyla , navbarancakfixed-top navbar çubuktaki .

Bunun başarısız olduğu, şimdi 2 navbar-brandöğe sunacak ekran okuyucuları ile . Bu, not-for-sro öğenin ekran okuyucular için görünmesini önlemek için bir sınıfa ihtiyaç olduğunu gösterir. Ancak bu sınıf mevcut değil https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Ekran okuyucu sorununu telafi etmeye çalıştım, aria-hidden="true"ancak https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ ekran okuyucu olduğunda bunun muhtemelen işe yaramayacağını gösteriyor gibi görünüyor Tabii ki çalışmak için ihtiyacınız olan tek zaman olan odak modunda ...

kullanmak percentageçok daha iyi bir çözümdür pixels.

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

Gerekirse breakpoints, başka bir cevapta belirtildiği gibi farklı ekleyerek açık olabilirsiniz .@spajus

EDIT: Bu çözüm, navbar-ters ve navbar-statik-top sınıflarının kullanılamadığı Bootstrap'in daha yeni sürümleri için geçerli değildir.

MVC 5'i kullanarak, benimkini sabitlememin yolu, diğer satırlardan sonra yüklenen kendi Site.css'imi aşağıdaki satırla eklemektir: body{padding: 0}

ve _Layout.cshtml başlangıcındaki kodu şu şekilde değiştirdim:

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

Gezinme çubuğunuz orijinal olarak sayfanın üstündeyse, değeri 0 olarak ayarlayın. Aksi takdirde, data-offset-top üstündeyse, değeri gezinme çubuğunuzun üzerindeki içeriğin değerine .

Bu arada, aşağıdaki cssgibi değiştirmeniz gerekir :

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

Bunu ekle:

.navbar {
  position: relative;
}

eklemelisin

#page {
  padding-top: 65px
}

yapışkan altbilgiyi veya başka bir şeyi yok etmemek

JS'nize ekleyin:

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

ekran çözünürlüğüne göre kenar boşluğu ayarlayabilirsiniz

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