J'essaie de créer une barre NAVTH pleine largeur, mais elle ne va pas la largeur complète.
C'est la partie du CSS de la NAV:
C'est ce qu'il a l'air:
3 Réponses :
OK, j'ai pu résoudre votre problème. Vous utilisez Bootstrap dans votre HTML. Bootstrap a un élément avec une classe "conteneur" et il a une requête multimédia à min-largeur: 1200px qui définit la largeur maximale de la classe de conteneur à 1140px. C'est pourquoi votre bar NAV ne peut pas aller plus loin que 1140px.
Pour résoudre ce problème, le meilleur moyen est de simplement modifier votre classe de conteneur vers .My-conteneur ou quelque chose de similaire. P>
Voici un exemple: p>
HTML P>
.my-container {
width:100%;
}
nav {
width:100%;
}
J'ai essayé tout ce que vous avez dit, toutes les largeurs sont sur 100%. J'ai essayé de créer un fichier codépen, mais cela n'a pas fonctionné, je télécharge les fichiers sur un rar, pls aidez-moi :( lien: mediafire.com/file/0kqd1c6wjb3scvz/index.rar/file
J'ai trouvé votre problème et j'ai pu le résoudre, consulter ma réponse mise à jour ci-dessus!
heureux d'avoir pu aider !
Lorsque la largeur est définie à 100%, elle prend 100% de la largeur de son parent.
Donc, je vous conseillerais de vérifier la largeur du parent et peut-être que le parent de ses parents est-il si le problème survient.
Vous pouvez appuyer sur Option + Commande + J et ouvrez les éléments. Là en planant sur les conteneurs, vous où le problème est découvert.
Sinon, je ne peux pas vous aider beaucoup plus avec les informations que vous avez données.
J'ai essayé tout ce que vous avez dit, toutes les largeurs sont sur 100%. J'ai essayé de créer un fichier codépen, mais cela n'a pas fonctionné, je télécharge les fichiers sur un rar, pls m'aidez-moi :( lien: mediafire.com/file/0kqd1c6wjb3scvz/index.rar/file
J'ai principalement ajouté une "marge: Aucun" sur * et j'ai modifié l'élément d'en-tête légèrement et quelques autres choses mineures car le Codepen a refusé, utilisez vos liens de bootstrap et AOS, etc.. J'ai essayé de ne pas trop changer depuis que j'ai d'autres choses à faire. Keep up le bon travail. Ici, c'est Codepen.io/iluvmommy/pen/pozokgl
Je mets le même HTML mais ça reste la même chose, de toute façon merci, vous êtes un homme très cool!
Je pense que le problème est avec cette partie, car lorsque je l'effacte, la barre NAVBAR est pleine de largeur:
J'ai réparé!!!!! Je pense que c'est la commande, la barre NAV est au-dessus de l'en-tête
Je pense qu'il a un parent div ou une balise parent, je pourrais ne pas être capable de dire ce qui ne va pas en regardant uniquement le style, je pourrais avoir besoin de votre HTML mais je pense que cela pourrait aider Remarque J'ai ajouté Bootstrap
P>
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</nav>
Je pense que vous devriez utiliser
largeur: 100vh; à l'élément bar NAV. Pourriez-vous relier le code complet si cela ne fonctionne pas? J'aimerais le voir pour vous aider.Vous devrez fournir un peu plus d'informations comme comment la navigation est placée à l'intérieur de votre HTML