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é
15408 affichage: Nombre de visites la question a
4 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

4 Réponses

Answer 2

6voto

Eduardo Points 95

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

Utilisation de la page-header en tant que conteneur pour la page, vous n'aurez pas besoin de vous occuper de l'élément <body> uniquement si vous n'êtes pas d'accord avec l'espace par défaut que le page-header vous 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>

Répondu el 27 de Février, 2016 par Eduardo (95 Points )

Answer 3

6voto

Raghav Rathi - With RVR Points 39

Si vous utilisez Bootstrap 5 et que vous voulez une barre de navigation en haut, remplacez fixed-top con sticky-top .

Problème résolu de données cachées sous la barre de navigation.

Répondu el 24 de Mars, 2021 par Raghav Rathi - With RVR (39 Points )

0 votes

Il a fonctionné avec bootstrap 4. Merci beaucoup.

Commenté el 17 de Juin, 2021 par Mustafa Karcıoğlu

Answer 4

4voto

CruzDelSur Points 71

J'ai résolu le problème en utilisant jquery

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

Répondu el 15 de Juillet, 2016 par CruzDelSur (71 Points )

Answer 5

-1voto

Anonymous Points 5

Facile :

Code (JS)

document.addEventListener("DOMContentLoaded", function(){
          navbar_height = document.querySelector('.navbar').offsetHeight; //get the offset height
          document.body.style.paddingTop = navbar_height + 'px'; // Add the offset height to the top padding
   });

StackOverflow lance une erreur parce que la classe navbar n'existe pas.

Répondu el 6 de Avril, 2022 par Anonymous (5 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: