Bootstrap css ukrywa część kontenera poniżej navbar navbar-fixed-top

127

Buduję projekt za pomocą Bootstrap i mam mały problem. Mam kontener poniżej Nav-top.Moje problem polega na tym, że część mojego kontenera jest ukryta pod nagłówkiem nav-top.Nie chcę używać górnego marginesu z pojemnik. Pls zobacz poniżej html, w którym mam problem

<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
źródło
Z dokumentacji bootstrap: Naprawiono do góry Dodaj .navbar-fixed-top i pamiętaj, aby uwzględnić ukryty obszar pod nim, dodając wypełnienie co najmniej 40 pikseli do <body>. Pamiętaj, aby dodać to po podstawowym CSS Bootstrap i przed opcjonalnym responsywnym CSS.
cms_mgr

Odpowiedzi:

215

Jest to obsługiwane przez dodanie niektórych paddingna górze <body>.

Zgodnie z dokumentacją Bootstrap.navbar-fixed-top , wypróbuj własne wartości lub użyj poniższego fragmentu kodu. Porada: Domyślnie navbarjest 50pxwysoka.

  body {
    padding-top: 70px;
  }

Spójrz także na źródło tego przykładu i otwórz starter-template.css.

Piotr
źródło
1
Dodałem wypełnienie 60px między responsywnym css a normalnym css i działało dobrze
Ajay Beniwal
1
problem polega na tym, że jeśli dostosuję bootstrap za pomocą linku dostosowywania, to nie otrzymam osobno responsywnego css ... więc nie ma sposobu, aby zapewnić to „między” dwiema deklaracjami. Również ta rada dotycząca dodawania tagów między moim normalnym a responsywnym css ... wydaje się trochę hakerska. Prawda? Musi być lepsze rozwiązanie niż to.
VJ.
Jeśli używasz LESS, użyj zmiennej bootstrap @ navbar-height, aby znaleźć wysokość paska nawigacyjnego.
yankee
3
Jest to raczej obejście niż rozwiązanie: chociaż pomaga to u góry strony, zakotwiczenia i inne elementy nadal nie działają. Jeśli przewiniesz do podsekcji za pomocą kotwic, tytuł podsekcji będzie znajdować się za paskiem nawigacji.
mastov
1
dlaczego tak się zaczyna dziać, czy ktoś wie? to właśnie zaczęło się do mnie przydarzać, co wydawało mi się znikąd i nadal nie mogę znaleźć źródła tego, co go zepsuło.
Taylor Brown
37

Wydaje mi się, że problem, który masz, jest związany z dynamiczną wysokością, jaką ma stały pasek nawigacyjny na górze. Na przykład, gdy użytkownik się loguje, musisz wyświetlić coś w rodzaju „ Witaj [nazwa użytkownika] ”, a gdy nazwa jest zbyt szeroka, pasek nawigacyjny musi mieć większą wysokość, aby tekst nie nakładał się na menu paska nawigacyjnego . Ponieważ pasek nawigacyjny ma styl „ position: fixed ”, ciało pozostaje pod nim, a jego wyższa część zostaje ukryta, więc musisz „dynamicznie” zmieniać wypełnienie u góry za każdym razem, gdy zmienia się wysokość paska nawigacyjnego, co może się zdarzyć w następujących sytuacjach scenariusze przypadków:

  1. Strona została załadowana / ponownie załadowana.
  2. Rozmiar okna przeglądarki jest zmieniany, ponieważ może to spowodować trafienie w inny responsywny punkt przerwania.
  3. Zawartość paska nawigacyjnego jest modyfikowana bezpośrednio lub pośrednio, ponieważ może to spowodować zmianę wysokości.

Ta dynamika nie jest objęta zwykłym CSS, więc mogę wymyślić tylko jeden sposób rozwiązania tego problemu, jeśli użytkownik ma włączoną obsługę JavaScript . Wypróbuj następujący fragment kodu jQuery, aby rozwiązać scenariusze przypadków 1 i 2; w przypadku scenariusza 3 pamiętaj o wywołaniu funkcji onResize () po każdej zmianie zawartości paska nawigacyjnego :

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>
Rozwiń fragment

LuckyBrain
źródło
To jest to, czego szukałem. Zoptymalizowano go, zapisując szerokość okna i sprawdzając, czy zmieniła się tylko zmiana rozmiaru w pionie.
Ripside
20

Po prostu zdefiniuj pusty pasek nawigacyjny przed ustalonym, utworzy potrzebną przestrzeń.

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>
przesuń się
źródło
8
To paskudny sposób robienia rzeczy.
DotSlashCoding
Zamknij, ale nie uwzględnia owijania elementów na prawdziwym pasku nawigacyjnym - chyba że zduplikujesz tam całe menu.
Ripside
Zgadzam się z @DotSlashCoding, to podejście nie jest dobrą praktyką kodowania (nie udaje się test konserwacji bez dobrego powodu). Nie jest od razu jasne, co navbarrobi ten dodatek .
kruche okna
Pragmatyczny i fajny. Myślę też, że wszystkie rozwiązania tego problemu są nieprzyjemne.
de.
8

Dzieje się tak, ponieważ wraz z navbar-fixed-topklasą pasek nawigacyjny otrzymuje rozszerzenie position:fixed. To z kolei usuwa pasek nawigacyjny z przepływu dokumentu, pozostawiając ciało, aby zająć miejsce za paskiem nawigacyjnym.

Musisz złożyć wniosek padding-toplub margin-topdo swojego container, w oparciu o swoje wymagania z wartościami >= 50px. (lub pobaw się różnymi wartościami)

Podstawowy pasek nawigacyjny bootstrap ma wysokość około 40px. Więc jeśli podasz padding-toplubmargin-top z 50px lub więcej, będziesz zawsze mieć tego wytchnienia pomiędzy swoim pojemniku i paska nawigacyjnego.

Praveen Puglia
źródło
6

Ja też miałem ten problem, ale rozwiązałem go bez skryptu i używając tylko CSS. Zaczynam od przestrzegania zalecanego górnego wypełnienia dla stałego menu, ustawiając 60px opisane na stronie Bootstrap. Następnie dodałem trzy tagi multimedialne, które zmieniają rozmiar wypełnienia w punktach odcięcia, w których zmienia się również rozmiar mojego menu.

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

Jedna uwaga, kiedy szerokość mojego menu wynosi od 768 do 991, logo menu w moim układzie plus <li> opcje powodują zawijanie menu do dwóch wierszy. Dlatego musiałem dostosować dopełnienie góry, aby menu nie zakrywało zawartości, stąd 110px.

Mam nadzieję że to pomoże...

Harvey Mushman
źródło
6

Wiem, że ten wątek jest stary, ale właśnie wpadłem w ten problem i naprawiłem go, używając page-headerklasy na mojej stronie, pod nawigacją. Użyłem też <nav>tagu zamiast<div> ale nie jestem pewien, czy będzie prezentował inne zachowanie.

Używając page-headerjako kontenera strony, nie będziesz musiał bawić się z <body>, tylko jeśli nie zgadzasz się z domyślną przestrzenią, którą page-headerdaje ci.

<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>
Rozwiń fragment

Zorkind
źródło
3

rozwiązałem to za pomocą jquery

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

CruzDelSur
źródło