Tôi có mã Bootstrap Twitter này

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

Nhưng khi tôi đang xem phần đầu của trang, thanh điều hướng sẽ chặn một số nội dung ở gần đầu trang. Bất kỳ ý tưởng nào về cách làm cho nó đẩy phần còn lại của nội dung xuống thấp hơn khi phần trên cùng của trang được xem để nội dung không bị chặn bởi thanh điều hướng?

Thêm vào CSS của bạn:

body { 
    padding-top: 65px; 
}

Từ các tài liệu Bootstrap :

Thanh điều hướng cố định sẽ che phủ nội dung khác của bạn, trừ khi bạn thêm phần đệm vào phần trên cùng của thân máy.

Thêm một phần đệm như thế là không đủ nếu bạn đang sử dụng bootstrap đáp ứng. Trong trường hợp này khi bạn thay đổi kích thước cửa sổ của mình, bạn sẽ có một khoảng cách giữa đầu trang và thanh điều hướng. Một giải pháp thích hợp trông như thế này:

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

Đối với bootstrap 3, lớp navbar-static-topthay vì navbar-fixed-topngăn chặn vấn đề này, trừ khi bạn cần hiển thị thanh điều hướng.

một giải pháp tiện dụng hơn nhiều để bạn tham khảo, nó hoạt động hoàn hảo trong tất cả các dự án của tôi:

thay đổi 'div' đầu tiên của bạn từ

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

đến

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

Tôi đang sử dụng jQuery để giải quyết vấn đề này. Đây là đoạn trích cho 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);        
});

Tôi đã thành công với việc tạo ra một thanh điều hướng không cố định giả ngay trước thanh điều hướng cố định thực sự của mình.

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

Khoảng cách hoạt động tuyệt vời trên tất cả các kích thước màn hình.

Trong dự án của tôi bắt nguồn từ hướng dẫn MVC 5, tôi thấy rằng việc thay đổi phần đệm cơ thể không có hiệu quả. Sau đây làm việc cho tôi:

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

Nó giải quyết các trường hợp thanh điều hướng gấp thành 2 hoặc 3 dòng. Điều này có thể được chèn vào bootstrap.css ở bất cứ đâu sau thân dòng {lề: 0; }

Mẫu khởi động bootstrap v4 css sử dụng:

body {
  padding-top: 5rem;
}

Như đã thấy trong ví dụ này từ Twitter, hãy thêm phần này trước dòng bao gồm các khai báo kiểu phản hồi:

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

Thích như vậy:

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

với thanh điều hướng mặc định, mọi thứ đều hoạt động tốt, nhưng nếu bạn đang sử dụng navbar-fixed-top, bạn phải bao gồm phần thân kiểu tùy chỉnh {padding-top: 60px;} nếu không nó sẽ chặn nội dung bên dưới.

Hai vấn đề sẽ xảy ra ở đây:

1. Tải trang (ẩn nội dung)
2. Các liên kết nội bộ như thế này sẽ cuộn lên trên cùng và được ẩn bởi thanh điều hướng:

<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 / liên kết trang nội bộ

Để sửa lỗi 1), như Martijn Burger đã nói ở trên, mẫu khởi động bootstrap v4 css sử dụng:

body {
  padding-top: 5rem;
}

Để khắc phục 2) kiểm tra vấn đề này . Mã này chủ yếu hoạt động (nhưng không phải trên lần nhấp thứ 2 của cùng một hàm băm):

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

Mã này hoạt hình Một liên kết với jQuery (không phải jQuery mỏng):

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

Giải pháp tốt nhất mà tôi tìm thấy cho đến nay, không liên quan đến chiều cao và điểm dừng mã hóa cứng là thêm một <nav...thẻ phụ vào đánh dấu.

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

Bằng cách làm theo cách này, các @mediađiểm dừng giống hệt nhau, chiều cao giống hệt nhau (với điều kiện bạn navbar-brandlà đối tượng cao nhất trong navbarnhưng bạn có thể dễ dàng thay thế một yếu tố khác trong khôngfixed-top điều hướng.

Trường hợp thất bại là với trình đọc màn hình hiện sẽ trình bày 2 navbar-brandyếu tố. Điều này chỉ ra sự cần thiết của một not-for-srlớp để ngăn phần tử đó hiển thị cho trình đọc màn hình. Tuy nhiên, lớp đó không tồn tại https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Tôi đã cố gắng bù đắp cho vấn đề trình đọc màn hình aria-hidden="true"nhưng https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ dường như cho thấy điều này có thể sẽ không hoạt động khi trình đọc màn hình trong chế độ lấy nét, dĩ nhiên là lần duy nhất bạn thực sự cần nó để làm việc ...

sử dụng percentagelà giải pháp tốt hơn nhiều pixels.

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

Nếu cần bạn vẫn có thể rõ ràng bằng cách thêm khác nhau breakpointsnhư được đề cập trong câu trả lời khác bằng cách@spajus

EDIT: Giải pháp này không khả thi đối với các phiên bản Bootstrap mới hơn, trong đó các lớp top-navverse-inverse và navbar-static-top không có sẵn.

Sử dụng MVC 5, cách tôi sửa lỗi của tôi, chỉ đơn giản là thêm Site.css của riêng tôi, được tải sau các dòng khác, với dòng sau: body{padding: 0}

và tôi đã thay đổi mã vào đầu _Layout.cshtml, thành:

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

Nếu thanh điều hướng của bạn ở trên cùng của trang ban đầu, hãy đặt giá trị thành 0. Nếu không, hãy đặt giá trị cho data-offset-top giá trị của nội dung phía trên thanh điều hướng của bạn.

Trong khi đó, bạn cần sửa đổi cssnhư vậy:

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

Thêm điều này:

.navbar {
  position: relative;
}

bạn nên thêm

#page {
  padding-top: 65px
}

để không phá hủy một footer dính hoặc cái gì khác

Thêm vào JS của bạn:

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

bạn có thể đặt lề dựa trên độ phân giải màn hình

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