Bootstrap css ẩn một phần của container bên dưới thanh điều hướng navbar-fixed-top

127

Tôi đang xây dựng một dự án với Bootstrap và tôi gặp phải một vấn đề nhỏ. Tôi có một thùng chứa bên dưới Nav -top. Vấn đề của tôi là một số phần trong container của tôi bị ẩn bên dưới tiêu đề hàng đầu. Tôi không muốn sử dụng lề trên cùng với thùng đựng hàng. Xin vui lòng xem html dưới đây trong đó tôi phải đối mặt với vấn đề

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>

</head>
<body>
    <div class="navbar navbar-fixed-top ">
        <div class="navbar-inner">
            <div class="container">
           <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
                    </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <i class="icon-eye-open">
                        </i>Assembly Elections
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
                        </ul>
                         </li><li class="divider-vertical">
                    </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
             </div>
         </div>
    </div>
  <div  class="container" >
   <ul class="nav nav-pills">
    <li class="active">
    <a href="#">Popular</a>
    </li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Latest</a></li>
    </ul>
   </div>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap-dropdown.js"></script>
    <script src="~/Scripts/Collapse.js"></script>
</body>
</html>

css twitter-bootstrap

— Ajay Beniwal
nguồn

Từ các tài liệu bootstrap: Đã sửa thành đầu Thêm .navbar-fixed-top và nhớ tính toán cho vùng ẩn bên dưới nó bằng cách thêm ít nhất 40px phần đệm vào <body>. Hãy chắc chắn để thêm phần này sau CSS Bootstrap lõi và trước CSS đáp ứng tùy chọn.

— cms_mgr

215

Điều này được xử lý bằng cách thêm một số paddingvào đầu <body>.

Theo tài liệu của Bootstrap.navbar-fixed-top , hãy thử các giá trị của riêng bạn hoặc sử dụng đoạn trích của chúng tôi dưới đây. Mẹo: Theo mặc định, navbarlà 50pxcao.

  body {
    padding-top: 70px;
  }

Ngoài ra, hãy xem nguồn cho ví dụ này và mở starter-template.css.

— Peter
nguồn

1

i thêm 60px đệm giữa css đáp ứng và css bình thường và nó làm việc tốt

— Ajay Beniwal

1

vấn đề là .. nếu tôi tùy chỉnh bootstrap thông qua liên kết tùy chỉnh .. thì tôi không nhận được css responsive riêng biệt ... vì vậy không có cách nào để cung cấp "giữa" hai khai báo này. Ngoài ra, lời khuyên bổ sung-tag-between-my-normal-and-responsive-css này .. có vẻ hơi hack. Phải không? Phải có giải pháp tốt hơn thế này.

— VJ.

Nếu bạn đang sử dụng LESS, hãy sử dụng biến bootstrap @ navbar-height để tìm chiều cao của thanh điều hướng.

— yankee

3

Đây là một giải pháp phù hợp hơn là một giải pháp: Mặc dù điều này giúp với đầu trang, các neo và như vậy vẫn không hoạt động. Nếu bạn cuộn đến một tiểu mục bằng cách sử dụng các neo, tiêu đề của tiểu mục sẽ ở phía sau thanh điều hướng.

— mastov

1

Tại sao điều này bắt đầu xảy ra để bắt đầu với bất cứ ai biết? nó chỉ bắt đầu xảy ra với tôi mà cảm thấy như không biết từ đâu và tôi vẫn không thể tìm thấy nguồn gốc của những gì đã phá vỡ nó.

— Taylor Brown

37

Tôi đoán vấn đề bạn gặp phải liên quan đến chiều cao động mà thanh điều hướng cố định ở trên cùng có. Ví dụ: khi người dùng đăng nhập, bạn cần hiển thị một số loại " Xin chào [Tên người dùng] " và khi tên quá rộng, thanh điều hướng cần sử dụng nhiều chiều cao hơn để văn bản này không trùng với menu thanh điều hướng . Vì thanh điều hướng có kiểu " vị trí: cố định ", phần thân nằm bên dưới và phần cao hơn của nó bị ẩn đi, do đó bạn cần "thay đổi" phần đệm ở trên cùng mỗi khi thay đổi chiều cao của thanh điều hướng sẽ xảy ra sau đây tình huống:

Trang được tải / tải lại.
Cửa sổ trình duyệt được thay đổi kích thước vì điều này có thể đạt đến một điểm dừng đáp ứng khác nhau.
Các thanh điều hướng nội dung được sửa đổi trực tiếp hoặc gián tiếp như thế này có thể kích động một sự thay đổi chiều cao.

Tính năng động này không được bao phủ bởi CSS thông thường nên tôi chỉ có thể nghĩ ra một cách để giải quyết vấn đề này nếu người dùng đã bật JavaScript . Vui lòng thử đoạn mã jQuery sau để giải quyết các tình huống 1 và 2; đối với trường hợp kịch bản 3, hãy nhớ gọi hàm onResize () sau khi có bất kỳ thay đổi nào trong nội dung thanh điều hướng :

var onResize = function() {
  // apply dynamic padding at the top of the body according to the fixed navbar height
  $("body").css("padding-top", $(".navbar-fixed-top").height());
};

// attach the function to the window resize event
$(window).resize(onResize);

// call it also when the page is ready after load or reload
$(function() {
  onResize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Mở rộng đoạn trích

— LuckyBrain
nguồn

Đây là những gì tôi đang tìm kiếm. Tối ưu hóa nó bằng cách lưu trữ chiều rộng cửa sổ và kiểm tra xem chỉ thay đổi kích thước dọc đã thay đổi.

— Ripside

20

Chỉ cần xác định một thanh điều hướng trống trước thanh cố định, nó sẽ tạo không gian cần thiết.

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>

— di chuyển
nguồn

8

Đây là một cách làm khó chịu.

— DotSlashCoding

Đóng, nhưng không tính đến việc gói các mục trong thanh điều hướng thực - trừ khi bạn sao chép tất cả các menu ở đó.

— Ripside

Đồng ý với @DotSlashCoding, cách tiếp cận này không phải là thực hành mã hóa tốt (không kiểm tra khả năng bảo trì mà không có lý do chính đáng). Nó không rõ ràng ngay lập tức những gì thêm navbarnày làm.

— Fragilewindows 7/12/2016

Thực dụng và mát mẻ. Tôi cũng nghĩ rằng tất cả các giải pháp cho vấn đề này là khó chịu.

— de.

8

Nó xảy ra bởi vì với navbar-fixed-toplớp, thanh điều hướng được position:fixed. Điều này lần lượt đưa thanh điều hướng ra khỏi luồng tài liệu rời khỏi cơ thể để chiếm không gian phía sau thanh điều hướng.

Bạn cần phải áp dụng padding-tophoặc margin-topcho của bạn container, dựa trên yêu cầu của bạn với các giá trị >= 50px. (hoặc chơi xung quanh với các giá trị khác nhau)

Các thanh điều hướng bootstrap cơ bản có chiều cao xung quanh 40px. Vì vậy, nếu bạn đưa ra một padding-tophoặc margin-topcác 50px trở lên, bạn sẽ luôn có không gian thở giữa bạn container và thanh điều hướng.

— Praveen Puglia
nguồn

6

Tôi cũng đã có vấn đề này nhưng đã giải quyết nó mà không có tập lệnh và chỉ sử dụng CSS. Tôi bắt đầu bằng cách làm theo phần đệm được đề xuất cho một menu cố định bằng cách cài đặt 60px được mô tả trên trang web Bootstrap. Sau đó, tôi đã thêm ba thẻ phương tiện thay đổi kích thước phần đệm tại các điểm cắt trong đó menu của tôi cũng thay đổi kích thước.

<style>      
    body{
        padding-top:60px;
    }
    /* fix padding under menu after resize */
    @media screen and (max-width: 767px) {
        body { padding-top: 60px; }
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        body { padding-top: 110px; }
    }
    @media screen and (min-width: 992px) {
        body { padding-top: 60px; }
    }
</style>

Một lưu ý, khi chiều rộng menu của tôi nằm trong khoảng từ 768 đến 991, logo menu trong bố cục của tôi cộng với các <li>tùy chọn khiến menu bị ngắt thành hai dòng. Do đó, tôi đã phải điều chỉnh phần đệm trên cùng để ngăn menu che nội dung, do đó 110px.

Hi vọng điêu nay co ich...

— Nấm Harvey
nguồn

6

Tôi biết chủ đề này đã cũ, nhưng tôi đã gặp vấn đề chính xác và tôi đã sửa nó bằng cách chỉ sử dụng page-headerlớp trong trang của tôi, dưới điều hướng. Ngoài ra tôi đã sử dụng <nav>thẻ thay vì <div>nhưng tôi không chắc nó sẽ thể hiện bất kỳ hành vi khác nhau.

Sử dụng page-headerlàm bộ chứa cho trang, bạn sẽ không cần phải gây rối với <body>, chỉ khi bạn không đồng ý với không gian mặc định mà trang đó page-headermang lại cho bạn.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



   <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top">
    
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Bootstrap</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                </ul>
                <div class="navbar-right">
                </div>
            </div>
        </nav>
    </div>
    <div class="page-header">
        <div class="clearfix">
            <div class="col-md-12">
                <div class="col-md-8 col-sm-6 col-xs-12">
                    <h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
                </div>
            </div>
        </div>
    </div>
        <div class="container">
        <div class="row">
            <form role="form">
                <div class="col-lg-6">
                    <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
                    <div class="form-group">
                        <label for="InputName">Enter Name</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Enter Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Confirm Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputMessage">Enter Message</label>
                        <div class="input-group">
                            <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
                </div>
            </form>
    </div>

Mở rộng đoạn trích

— Zorkind
nguồn

3

tôi đã giải quyết nó bằng cách sử dụng jquery

<script type="text/javascript">
$(document).ready(function(e) {
   var h = $('nav').height() + 20;
   $('body').animate({ paddingTop: h });
});
</script>

Mở rộng đoạn trích

— CruzDelSur
nguồn