Nouveau dans Bootstrap 4 et création d'une page factice / maquette avec un en-tête pour s'habituer au système de navbar .
J'ai créé ce jsFiddle (code complet) ici, mais l'essentiel de ma page est:
index.html
html, body {
height: 100%;
font-family: 'Lato';
}
.bordered {
border-radius: 5px;
border: 1px solid white;
}
.navbar {
background-color: #00142e;
}
.red-button {
border-radius: 5px;
border: 1px solid #A81E30;
background-color: #A81E30;
color: beige;
}
.mainlogo {
width: 35%;
}
main.css
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://raw.githubusercontent.com/bitbythecron/bootstrap-troubleshooting/main/dummy-logo.png" class="img-fluid mainlogo" alt="Responsive image">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="aboutMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="fizzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fizz
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="buzzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Buzz
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="foobarMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Foobar
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="resourcesMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="helpMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
</li>
<li class="nav-item">
<a class="nav-link red-button" href="javascript:void(0)">WATCH DEMO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link bordered" href="javascript:void(0)">Sign Up</a>
</li>
</ul>
</div>
</nav>
Quand cela fonctionne, j'obtiens:
Le principal problème ici est l'épaisseur du rembourrage autour de la barre de navigation. Comment puis-je faire en sorte qu'il n'y ait pas de remplissage et que la hauteur de la barre de navigation soit la même que celle du logo et des liens de menu, ou tout au plus juste un pixel ou deux de plus que? Je l' ai fait essayer d' ajouter padding: 0px; au style navbar mais cela n'a rien affecté.
Je voudrais également centrer tout le contenu de la barre de navigation (logo + éléments de menu) ... des idées là-bas? J'ai essayé d'ajouter d-flex justify-content-center à navbar-collapse mais cela n'a rien fait non plus. Merci d'avance!
J'ai mis à jour mon jsFiddle avec les modifications suggérées ci-dessous et maintenant je vois:
Donc, je ne vois toujours pas le contenu de la barre de navigation (encore une fois: logo + liens) centré et je vois un remplissage indésirable, ce qui signifie que la barre bleue est un peu trop haute pour ce que je recherche (je veux quelque chose de plus court et serrant le logo + liens un peu plus serrés).
4 Réponses :
Pour corriger le centrage, ajoutez align-item: center à votre unordered list . Cela devrait être l'élément enfant de votre élément navbar-collapse , et il navbar-collapse tous vos liens verticalement.
En ce qui concerne le remplissage, je pense qu'il serait préférable de supprimer class="img-fluid mainlogo" alt="Responsive image" et de donner à la place à votre image une propriété de height que vous aimez. Quand je l'ai fait, il semblait également que cela résolvait votre problème de centrage.
Faites-moi savoir si cela a fonctionné pour vous!
modifié pour ajouter un extrait de code
/*old selector for mainlogo*/
.mainlogo {
width: 35%;
}
/*new selector for mainlogo*/
.mainlogo {
height: 50px;
}
/*added selector. targets ul elements that are descendents of element with id "navb"*/
#navb ul {
align-items: center;
}
Merci @MJPooler (+1) - (1) concernant le centrage, j'ai ajouté .navbar-nav { align-item: center; } à mon main.css mais cela n'a rien changé. Et (2) j'ai du mal à visualiser ce que vous dites par rapport à la propriété height de la partie padding. Pouvez-vous fournir un simple extrait de code avec votre réponse pour me montrer de quoi vous parlez, pour les deux? Merci encore beaucoup!
Rebonjour! Ainsi, .navbar-nav n'est pas le sélecteur que vous voudrez utiliser, car la liste non ordonnée est l'élément parent qui contient les éléments enfants que vous souhaitez centrer. #navb ul ciblera cet ul, et align-items: center centrera les éléments de la liste. Pour la deuxième partie de votre question, il semble que votre logo soit défini à l'aide d'un pourcentage, ce qui changera constamment la taille de votre logo chaque fois que la fenêtre du navigateur est redimensionnée. Je pense que l'utilisation d'une hauteur définie pour le logo (ou d'une largeur définie) résoudra vos problèmes de remplissage avec la barre de navigation et maintiendra votre logo à une taille cohérente.
Merci encore @MJPoole (+1) - veuillez consulter ma mise à jour qui comprend un nouveau lien vers un jsFiddle mis à jour (qui contient vos suggestions de modifications). Je pense que nous allons dans la bonne direction ici, mais nous n'obtenons toujours pas tout à fait le centrage et le dé-rembourrage que je recherche. Avez-vous d'autres suggestions ici? Merci encore!
J'ai bifurqué votre travail dans JSFiddle, voyez ce que j'ai fait .
En fait, j'ai enveloppé votre <nav> dans un <header> , puis j'ai ajouté le container classe bootstrap pour centrer le contenu en fonction de la taille de l'écran avec media-queries .
De plus, j'ai changé votre classe de contenu container-fluid en container afin d'avoir les mêmes résultats de dimensionnement entre la barre de navigation et le reste de votre page.
J'ai supprimé l' img-fluid sur votre image, afin d'éviter d'étirer l'image si la page est redimensionnée.
De plus, comme votre question dans un autre article navbar background j'ai répondu, j'ai changé l' navbar background de la navbar background pour l'adapter à la navbar background de votre logo de marque;)
Et en bonus, j'ai ajouté la classe navbar-dark , maintenant vous pouvez voir votre menu de hamburgers lorsque les éléments de navigation sont réduits. Parce que depuis bootstrap 4 :
.navbar-default est maintenant .navbar-light, bien que .navbar-dark reste le même. L'un de ces éléments est requis sur chaque barre de navigation. Cependant, ces classes ne définissent plus les couleurs d'arrière-plan; au lieu de cela, ils n'affectent essentiellement que la couleur.
Bonus 2: J'ai supprimé votre classe de red-button ai changée en btn btn-danger qui est tout à fait la même chose, mais avec des règles de hover . Et pour votre bouton d'inscription, j'ai ajouté btn btn-success . J'ai fait ça pour vous permettre d'apprendre sur ces cours aussi, car il n'est pas nécessaire de réinventer la roue :)
Ensuite, vous pouvez utiliser dans vos questions / réponses dans StackOverflow, l' Javascript/HTML/CSS snippet CTRL-M JSFiddle Javascript/HTML/CSS snippet CTRL-M intégré comme ci-dessous:
<!DOCTYPE html>
<html>
<head>
<title>Special Nonprofit</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<header id="nav-container">
<nav class="navbar navbar-dark navbar-expand-lg container">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://raw.githubusercontent.com/bitbythecron/bootstrap-troubleshooting/main/dummy-logo.png" class="mainlogo" alt="Responsive image">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="aboutMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="fizzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fizz
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="buzzMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Buzz
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="foobarMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Foobar
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="resourcesMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="helpMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-danger" href="javascript:void(0)">WATCH DEMO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-success" href="javascript:void(0)">Sign Up</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</body>
</html>html, body {
height: 100%;
font-family: 'Lato';
}
.bordered {
border-radius: 5px;
border: 1px solid white;
}
header#nav-container{
background-color: #001a31;
}
#navb ul {
align-items: center;
}
.mainlogo {
height: 50px;
}Essaye ça!
<div id="sidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
×
</a>
<a href="#">Placeholder 1</a>
<a href="#">Placeholder 2</a>
<a href="#">Placeholder 3</a>
<a href="#">Placeholder 4</a>
<a href="#">Placeholder 5</a>
<a href="#">Placeholder 6</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">
Hello
</button>
</div>
<script>
/* Sets the width of the sidebar
to 250 and the left margin of the
page content to 250 */
function openNav() {
document.getElementById(
"sidebar").style.width = "250px";
document.getElementById(
"main").style.marginLeft = "250px";
}
/* Set the width of the sidebar
to 0 and the left margin of the
page content to 0 */
function closeNav() {
document.getElementById(
"sidebar").style.width = "0";
document.getElementById(
"main").style.marginLeft = "0";
}
</script> .sidebar {
height: 100%;
width: 0;
position: fixed;
/*Stays in place */
background-color: #303630;
/*Grey*/
overflow-x: hidden;
color:white;
z-index: 12;
/*for Disabling horizontal scroll */
}
/* Position and style for the sidebar links */
.sidebar a {
padding: 10px 10px 10px;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s;
}
/* the links change color when mouse hovers upon them*/
.sidebar a:hover {
color: #ffffff;
}
/* Position and style the for cross button */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
}
/* Style for the sidebar button */
.openbtn {
font-size: 25px;
background-color: #000000;
color: #ffffff;
padding: 10px 10px 10px;
border: none;
position: fixed;
z-index: 12;
}
/* the sidebar button changes
color when mouse hovers upon it */
.openbtn:hover {
color: #FFFFFF;
}
/* pushes the page content to the right
when you open the side navigation */
#main {
transition: margin-left .5s;
/* If you want a transition effect */
padding: 10px;
}C'est de W3Schools
J'ai déplacé tout le contenu de la barre de navigation vers le centre avec mx-auto classe mx-auto . supprimé le rembourrage pour le haut et le bas avec la classe py-0 . ceci est égal à padding-top: 0; padding-bottom: 0; puis avec des requêtes médiatiques. Je passe du logo principal au logo secondaire.
Voici le code:
@MJPoole Est-ce à quoi vous voulez que la barre de navigation ressemble?
Pouvez-vous s'il vous plaît montrer un graphique ... ce que vous voulez réaliser?