简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - La barre de navigation Bootstrap est inexplicablement 20px supplémentaire, que se passe-t-il?
为情所困
为情所困 2017-07-05 10:42:51
0
3
867

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html</title>
    <link rel="stylesheet" href="./rule/bootstrap-Normalize.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <p class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <p class="navbar-header">
                <button type="button" class="navbar-toggle collapase" data-toggle="collapase" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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="#">Brand</a>
            </p>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only"></span></a>Link</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><a role="separator" href="#"></a></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a role="separator" href="#"></a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </p>
        </p>
    </nav>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include inpidual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="main.js">
    </script>
</body>
</html>
为情所困
为情所困

répondre à tous(3)
習慣沉默
習慣沉默2017-07-05 10:44:51 3 plancher

En effet, la barre de navigation de Bootstrap n'a que 51 px de haut par défaut et n'est pas toujours de 51 px de haut. S'il contient plusieurs lignes d'éléments, la hauteur sera augmentée.

Dans votre démo, comme une étiquette a un lien supplémentaire, la barre de navigation entière est augmentée de 20 px.

Comme +0
Ajouter une réponse
某草草
某草草2017-07-05 10:44:51 2 plancher

Est-ce fourni par le framework ? Marign:0 ou padding:0 ne sont pas valides

Comme +0
Ajouter une réponse
代言
代言2017-07-05 10:44:51 1 plancher

Vous pouvez retrouver la barre de navigation dans l'arborescence DOM de la console, puis supprimer les éléments un par un de l'intérieur vers l'extérieur pour savoir quel élément est à l'origine du problème

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！