Bootstrap css cache la partie du conteneur sous la barre de navigation navbar-fixed-top

Question

Bootstrap css cache la partie du conteneur sous la barre de navigation navbar-fixed-top

Demandé el 6 de Février, 2013: Quand la question a-t-elle été
15407 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis en train de construire un projet avec Bootstrap et je fais face à un petit problème. J'ai un conteneur sous le Nav-top. Mon problème est qu'une partie de mon conteneur est cachée sous l'en-tête du Nav-top. Je ne veux pas utiliser top-margin avec le conteneur. Veuillez voir le html ci-dessous dans lequel je rencontre le 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="stackoverflow.com/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="stackoverflow.com/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="stackoverflow.com/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="stackoverflow.com/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>

Demandé el 6 de Février, 2013 par Ajay Beniwal

0 votes

D'après la documentation de bootstrap : Fixé en haut Ajoutez .navbar-fixed-top et n'oubliez pas de tenir compte de la zone cachée en dessous en ajoutant au moins 40px de padding au <body>. Veillez à ajouter cet élément après le CSS de base de Bootstrap et avant le CSS réactif facultatif.

Commenté el 6 de Février, 2013 par cms_mgr

Answer 1

5 Réponses

Answer 2

230voto

Peter Points 3310

Ceci est géré en ajoutant des padding au sommet de la <body> .

Según La documentation de Bootstrap sur .navbar-fixed-top , Essayez vos propres valeurs ou utilisez notre extrait ci-dessous. Conseil : par défaut, le navbar es 50px élevé.

  body {
    padding-top: 70px;
  }

Aussi, jetez un coup d'œil à la source pour cet exemple et ouvrir starter-template.css .

Répondu el 6 de Février, 2013 par Peter (3310 Points )

1 votes

J'ai ajouté un padding de 60px entre le css responsive et le css normal et cela fonctionne bien.

Commenté el 6 de Février, 2013 par Ajay Beniwal

2 votes

Le problème est que... si je personnalise le bootstrap via le lien customize... alors je n'ai pas de css responsive séparément... donc il n'y a aucun moyen de fournir cela "entre" les deux déclarations. Aussi, ce conseil d'ajouter une étiquette entre ma css normale et ma css réactive... semble un peu fantaisiste. N'est-ce pas ? Il doit y avoir une meilleure solution que celle-ci.

Commenté el 17 de Mai, 2013 par VJ.

0 votes

Si vous utilisez LESS, utilisez la variable bootstrap @navbar-height pour trouver la hauteur de la barre de navigation.

Commenté el 20 de Février, 2015 par yankee

Afficher 2 autres commentaires

Answer 3

41voto

LuckyBrain Points 501

Je suppose que le problème que vous rencontrez est lié à la hauteur dynamique que le système fixe barre de navigation en haut de l'écran. 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 fonction barre de navigation doit utiliser plus de hauteur pour que ce texte ne se superpose pas avec le barre de navigation menu. Comme le barre de navigation a le style " position : fixe "Le corps reste en dessous et une partie plus haute est cachée. Vous devez donc modifier "dynamiquement" le rembourrage en haut à chaque fois que la balise barre de navigation les changements de hauteur qui se produiraient dans les cas de figure suivants :

La page est chargée / rechargée.
La fenêtre du navigateur est redimensionnée car elle pourrait atteindre un autre point d'arrêt réactif.
El barre de navigation le contenu est modifié directement ou indirectement car cela pourrait provoquer un changement de hauteur.

Cette dynamicité n'est pas couverte par les programmes réguliers de CSS donc je ne vois qu'une seule façon de résoudre ce problème si l'utilisateur a JavaScript activé. Veuillez essayer ce qui suit jQuery pour résoudre les scénarios 1 et 2 ; pour le scénario 3, n'oubliez pas d'appeler la fonction onResize() après toute modification de la barre de navigation contenu :

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>

Répondu el 21 de Mai, 2015 par LuckyBrain (501 Points )

0 votes

C'est ce que je cherchais. Je l'ai optimisé en stockant la largeur de la fenêtre et en vérifiant si seul le redimensionnement vertical a changé.

Commenté el 18 de Octobre, 2016 par Ripside

Answer 4

20voto

move.over Points 209

Il suffit de définir une barre de navigation vide avant la barre fixe pour créer 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>

Répondu el 5 de Août, 2015 par move.over (209 Points )

10 votes

C'est une façon désagréable de faire les choses.

Commenté el 19 de Septembre, 2016 par DotSlashCoding

0 votes

C'est presque ça, mais cela ne tient pas compte de l'habillage des éléments de la vraie barre de navigation - à moins que vous ne dupliquiez tout le menu à cet endroit.

Commenté el 18 de Octobre, 2016 par Ripside

0 votes

D'accord avec @DotSlashCoding, cette approche n'est pas une bonne pratique de codage (elle échoue au test de maintenabilité sans raison valable). Il n'est pas clair tout de suite ce que cet extra navbar fait.

Commenté el 7 de Décembre, 2016 par fragilewindows

Afficher 1 autres commentaires

Answer 5

9voto

pjp Points 962

Cela arrive parce qu'avec navbar-fixed-top la barre de navigation reçoit la classe position:fixed . Cela a pour effet de sortir la barre de navigation du flux du document, laissant le corps du document occuper l'espace. derrière la barre de navigation.

Vous devez appliquer padding-top o margin-top à votre container sur la base de vos besoins avec des valeurs >= 50px . (ou jouez avec des valeurs différentes)

Le bootstrap de base barre de navigation prend de la hauteur autour de 40px . Donc si vous donnez un padding-top o margin-top de 50px ou plus, vous aurez toujours cet espace de respiration entre votre et la barre de navigation.

Répondu el 6 de Février, 2013 par pjp (962 Points )

Answer 6

6voto

Harvey Mushman Points 378

Moi aussi j'ai eu ce problème mais je l'ai résolu sans script et en utilisant uniquement les CSS. J'ai commencé par suivre le padding-top recommandé pour un menu fixe en fixant de 60px décrit sur le site de Bootstrap. J'ai ensuite ajouté trois balises media qui redimensionnent le padding 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 remarque : lorsque la largeur de mon menu est comprise entre 768 et 991, le logo du menu dans ma mise en page ainsi que l'icône de l'icône de l'utilisateur sont affichés. <li> font que le menu s'étend sur deux lignes. J'ai donc dû ajuster le padding-top pour éviter que le menu ne couvre le contenu, d'où 110px.

J'espère que cela vous aidera...

Répondu el 1 de Novembre, 2015 par Harvey Mushman (378 Points )

Bootstrap css cache la partie du conteneur sous la barre de navigation navbar-fixed-top

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Bootstrap css cache la partie du conteneur sous la barre de navigation navbar-fixed-top

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: