ฉันมีรหัส Bootstrap ของ 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>

แต่เมื่อฉันดูจุดเริ่มต้นของหน้าแถบนำทางกำลังบล็อกเนื้อหาบางส่วนที่อยู่ใกล้ด้านบนของหน้า มีแนวคิดใดเกี่ยวกับวิธีทำให้เนื้อหาที่เหลือลดลงเมื่อมีการดูด้านบนของหน้าเพื่อให้เนื้อหานั้นไม่ถูกบล็อกโดยแถบนำทาง

เพิ่มใน CSS ของคุณ:

body { 
    padding-top: 65px; 
}

จากBootstrap docs :

แถบนำทางคงที่จะซ้อนทับเนื้อหาอื่น ๆ ของคุณเว้นแต่ว่าคุณจะเพิ่มช่องว่างภายในไปด้านบนของเนื้อหา

การเพิ่มช่องว่างภายในนั้นไม่เพียงพอหากคุณใช้ bootstrap ที่ตอบสนองต่อ ในกรณีนี้เมื่อคุณปรับขนาดหน้าต่างของคุณคุณจะได้รับช่องว่างระหว่างส่วนบนของหน้าและ navbar โซลูชันที่เหมาะสมมีลักษณะดังนี้:

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

สำหรับ bootstrap 3 คลาสnavbar-static-topแทนการnavbar-fixed-topป้องกันปัญหานี้เว้นแต่ว่าคุณต้องการ navbar ให้มองเห็นได้เสมอ

โซลูชั่นที่มีประโยชน์มากขึ้นสำหรับการอ้างอิงของคุณมันทำงานได้สมบูรณ์แบบในทุกโครงการของฉัน:

เปลี่ยน 'div' ตัวแรกของคุณจาก

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

ถึง

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

ฉันใช้ 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);        
});

ฉันประสบความสำเร็จเป็นอย่างดีในการสร้างแถบนำทางที่ไม่มีการจับจ้องอยู่ที่ด้านหน้าของแถบนำทางจริงของฉัน

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

ระยะห่างใช้งานได้ดีในทุกขนาดหน้าจอ

ในโครงการของฉันมาจากการสอน 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;
    }
}

มันแก้ไขกรณีที่ navbar พับเป็น 2 หรือ 3 บรรทัด ซึ่งสามารถแทรกลงใน bootstrap.css ได้ทุกที่หลังจากบรรทัดเนื้อหา {margin: 0; }

แม่แบบเริ่มต้น bootstrap v4 cssใช้:

body {
  padding-top: 5rem;
}

ตามที่เห็นในตัวอย่างนี้จาก 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" />

ด้วยnavbarทุกอย่างเริ่มต้นที่ navbarทำงานได้ดี แต่ถ้าคุณใช้navbar-fixed-topคุณจะต้องรวมเนื้อหาสไตล์ที่กำหนดเอง {padding-top: 60px;} มิฉะนั้นจะบล็อกเนื้อหาที่อยู่ด้านล่าง

สองปัญหาจะเกิดขึ้นที่นี่:

1. โหลดหน้า (ซ่อนเนื้อหา)
2. ลิงก์ภายในเช่นนี้จะเลื่อนไปด้านบนและซ่อนไว้โดย 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 / ลิงค์หน้าภายใน

ในการแก้ไข 1) ตามที่ Martijn Burger กล่าวข้างต้น bootstrap v4 เทมเพลตเริ่มต้น css ใช้:

body {
  padding-top: 5rem;
}

เพื่อแก้ไข 2) ตรวจสอบปัญหานี้ รหัสนี้ใช้งานได้เป็นส่วนใหญ่ (แต่ไม่ใช่เมื่อคลิกแฮชเดียวกันครั้งที่ 2):

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

รหัสนี้ทำให้แอนิเมชั่นลิงก์กับ jQuery (ไม่ใช่ 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);
    });
  })

ทางออกที่ดีที่สุดที่ฉันเคยพบมาซึ่งไม่เกี่ยวข้องกับความสูงและจุดพักโค้ดที่ยากคือการเพิ่ม<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/ดูเหมือนว่าจะไม่ทำงานเมื่อตัวอ่านหน้าจอเป็น ในโหมดโฟกัสซึ่งแน่นอนว่าครั้งเดียวที่คุณต้องการใช้งานจริง ...

ใช้เป็นวิธีการแก้ปัญหาที่ดีกว่าpercentagepixels

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

หากจำเป็นคุณยังสามารถระบุได้อย่างชัดเจนโดยการเพิ่มbreakpointsคำตอบต่าง ๆตามที่กล่าวไว้ใน@spajus

แก้ไข: โซลูชันนี้ไม่สามารถใช้งานได้สำหรับ Bootstrap รุ่นใหม่ซึ่งไม่มีคลาส navbar-inverse และ navbar-static-top

การใช้ 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">

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

หาก navbar ของคุณอยู่ด้านบนของหน้าให้ตั้งค่าเป็น 0 มิฉะนั้นให้ตั้งค่าdata-offset-topเป็นค่าของเนื้อหาเหนือ navbar ของคุณ

ในขณะเดียวกันคุณต้องแก้ไขcssเช่น:

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

เพิ่มสิ่งนี้:

.navbar {
  position: relative;
}

คุณควรเพิ่ม

#page {
  padding-top: 65px
}

ที่จะไม่ทำลายท้ายกระดาษหรือสิ่งอื่นใด

เพิ่มใน JS ของคุณ:

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

คุณสามารถกำหนดระยะขอบตามความละเอียดหน้าจอ

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