<!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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.
Est-ce fourni par le framework ? Marign:0 ou padding:0 ne sont pas valides
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