Bootstrap css cache une partie du conteneur sous navbar navbar-fixed-top

127

Je construis un projet avec Bootstrap et je suis confronté à un petit problème. J'ai un conteneur sous Nav-top.Mon problème est qu'une partie de mon conteneur est cachée sous l'en-tête nav-top.Je ne veux pas utiliser top-margin avec récipient. Pls voir ci-dessous html dans lequel je suis confronté au problème

<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
la source
À partir de la documentation de bootstrap: Fixed to top Ajoutez .navbar-fixed-top et n'oubliez pas de tenir compte de la zone cachée en dessous en ajoutant au moins 40px padding au <body>. Assurez-vous de l'ajouter après le CSS Bootstrap principal et avant le CSS réactif facultatif.
cms_mgr

Réponses:

215

Ceci est géré en ajoutant quelques-uns paddingen haut du fichier <body>.

Selon la documentation de Bootstrap sur.navbar-fixed-top , essayez vos propres valeurs ou utilisez notre extrait ci-dessous. Conseil: par défaut, le navbarest 50pxélevé.

  body {
    padding-top: 70px;
  }

Jetez également un œil à la source de cet exemple et ouvrez starter-template.css.

Peter
la source
1
J'ai ajouté un rembourrage de 60 pixels entre le CSS réactif et le CSS normal et cela a bien fonctionné
Ajay Beniwal
1
le problème est ... si je personnalise le bootstrap via le lien de personnalisation ... alors je n'obtiens pas de réponse css séparément ... il n'y a donc aucun moyen de fournir ce "entre" les deux déclarations. De plus, ce conseil d'ajout d'une balise entre mon css normal et réactif .. semble un peu hackish. N'est-ce pas? Il doit y avoir une meilleure solution que celle-ci.
VJ.
Si vous utilisez LESS, utilisez la variable bootstrap @ navbar-height pour trouver la hauteur de la barre de navigation.
yankee
3
C'est plus une solution de contournement qu'une solution: bien que cela aide avec le haut de la page, les ancres et autres ne fonctionnent toujours pas. Si vous faites défiler jusqu'à une sous-section en utilisant des ancres, le titre de la sous-section sera derrière la barre de navigation.
mastov
1
pourquoi cela commence-t-il à arriver au début, est-ce que quelqu'un le sait? cela a juste commencé à m'arriver, ce qui me semblait être venu de nulle part et je ne peux toujours pas trouver la source de ce qui l'a brisé au départ.
Taylor Brown
37

Je suppose que le problème que vous rencontrez est lié à la hauteur dynamique de la barre de navigation fixe en haut. Par exemple, lorsqu'un utilisateur se connecte, vous devez afficher une sorte de " Bonjour [Nom d'utilisateur] " et lorsque le nom est trop large, la barre de navigation doit utiliser plus de hauteur pour que ce texte ne chevauche pas le menu de la barre de navigation . Comme la barre de navigation a le style « position: fixed », le corps reste en dessous et une partie plus haute de celui-ci devient cachée, vous devez donc modifier «dynamiquement» le rembourrage en haut à chaque fois que la hauteur de la barre de navigation change, ce qui se produirait dans ce qui suit scénarios de cas:

  1. La page est chargée / rechargée.
  2. La fenêtre du navigateur est redimensionnée car cela pourrait atteindre un point d'arrêt réactif différent.
  3. Le contenu de la barre de navigation est modifié directement ou indirectement car cela pourrait provoquer un changement de hauteur.

Cette dynamicité n'est pas couverte par le CSS standard, donc je ne peux penser qu'à une façon de résoudre ce problème si l'utilisateur a activé JavaScript . Veuillez essayer l' extrait de code jQuery suivant pour résoudre les scénarios de cas 1 et 2; pour le scénario 3, n'oubliez pas d'appeler la fonction onResize () après tout changement dans le contenu de la barre de navigation :

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>
Développer l'extrait

LuckyBrain
la source
C'est ce que je cherchais. Optimisé en stockant la largeur de la fenêtre et en vérifiant si seul le redimensionnement vertical a changé.
Ripside
20

Définissez simplement une barre de navigation vide avant la barre fixe, cela créera l'espace nécessaire.

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>
bouge
la source
8
C'est une mauvaise façon de faire les choses.
DotSlashCoding
Fermer, mais ne tient pas compte de l'encapsulation des éléments dans la barre de navigation réelle - à moins que vous ne dupliquiez tout le menu à cet endroit.
Ripside
D'accord avec @DotSlashCoding, cette approche n'est pas une bonne pratique de codage (échoue au test de maintenabilité sans raison valable). On ne sait pas tout de suite ce que fait cet extra navbar.
fragilewindows
Pragmatique et cool. Je pense également que toutes les solutions à ce problème sont désagréables.
de.
8

Cela arrive parce qu'avec la navbar-fixed-topclasse, la barre de navigation obtient le fichier position:fixed. Ceci à son tour retirer la barre de navigation du flux de documents, laissant le corps occuper l'espace derrière la barre de navigation.

Vous devez postuler padding-topou margin-topà votre container, en fonction de vos exigences avec des valeurs >= 50px. (ou jouer avec différentes valeurs)

La barre de navigation de base bootstrap prend de la hauteur 40px. Donc, si vous donnez un padding-topou margin-topsur 50px ou plus, vous aurez toujours cet espace de respiration entre votre conteneur et la barre de navigation.

Praveen Pouilles
la source
6

J'ai aussi eu ce problème mais je l'ai résolu sans script et en utilisant uniquement CSS. Je commence par suivre le padding-top recommandé pour un menu fixe en définissant 60px décrit sur le site Bootstrap. Ensuite, j'ai ajouté trois balises multimédias qui redimensionnent le remplissage aux points de coupure où mon menu se redimensionne également.

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

Une note, lorsque la largeur de mon menu est comprise entre 768 et 991, le logo du menu dans ma mise en page plus les <li>options font que le menu se déroule sur deux lignes. Par conséquent, j'ai dû ajuster le padding-top pour empêcher le menu de couvrir le contenu, donc 110px.

J'espère que cela t'aides...

Harvey Mushman
la source
6

Je sais que ce fil est vieux, mais je viens de rencontrer exactement ce problème et je l'ai résolu en utilisant simplement la page-headerclasse dans ma page, sous la navigation. J'ai également utilisé la <nav>balise au lieu de <div>mais je ne suis pas sûr qu'elle présenterait un comportement différent.

En utilisant le page-headercomme conteneur pour la page, vous n'aurez pas besoin de jouer avec le <body>, uniquement si vous n'êtes pas d'accord avec l'espace par défaut que le page-headervous donne.

<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>
Développer l'extrait

Zorkind
la source
3

je l'ai résolu en utilisant jquery

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

CruzDelSur
la source