J'utilise Bootstrap 4 et j'essaie de créer un élément NAV-Ayez la même hauteur que ma barre NAV, de sorte que lorsque j'ajoute une couleur d'arrière-plan, cela ressemble à une bande à travers la barre de navigation.
Initialement, l'article a été centré et laissé de l'espace sur le dessus et ci-dessous. J'ai ajouté une marge négative pour le faire face au sommet mais la même chose ne fonctionnait pas quand j'ai essayé d'ajouter "Marge-bas"
J'ai alors essayé de réparer la hauteur de la barre de navigation, mais quand je l'ai fait et Cliquez sur la bascule pour faire descendre les éléments NAVBAR, ils ne sont pas apparus car la hauteur fixe l'empêchait d'apparaître.
3 Réponses :
Quelques choses:
Nav-item code> sur le haut et ceux qui sont révélés lors de la cliquant sur le menu Burger li>
- Le
NAVBar code> La classe avait un rembourrage que nous avons dû écraser pour s'occuper du look rayé li>
- Assurez-vous que votre CSS est chargé après la bootstrap, de sorte que vous puissiez le remplacer sans utiliser
! important code> li>
ul> Snippet de travail strong> ci-dessous: p> p>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-dark bg-dark text-center">
<div class="container">
<div class="mr-auto order-0" class="d-flex align-items-stretch">
<a class="nav-item nav-link my-custom-style" href="#">Matthew Krebs</a>
</div>
<a class="navbar-brand text-center" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<style>
.navbar {
padding-top: 0;
padding-bottom: 0;
}
/* just to highlight our nav-item */
.my-custom-style {
background-color: red;
}
.nav-link {
border: 1px dotted yellow;
}
</style>
L'effet souhaité peut être obtenu en supprimant simplement le remplissage de l'élément
Ici vous allez!
p>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav style="padding-top: 0px; padding-bottom: 0px;" class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script>
document.querySelectorAll(".nav-item").forEach(item => {
item.style.height = document.getElementById("navbar").offsetHeight;
item.style.backgroundColor = 'aqua';
item.style.marginRight = '5px';
})
</script>
</body>
</html>