J'ai récemment publié un site et je me rends compte que la taille de chaque page de ce site est toujours plus large que la taille de l'écran (même si mon écran a une résolution de 3840 * 2160!).
J'utilise Boostrap 4 et dans la vue _Layout, j'ai par défaut la balise meta qui permet d'adapter la taille de la page à l'appareil utilisé:
<div class="bs-docs-section clearfix">
<div class="row m-0">
<div class="col-lg-12">
<div class="bs-component">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#C6DA4B">
<div class="container p-0">
<div class="navbar-header">
@Html.ActionLink("Home", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="collapse navbar-collapse" id="navbar">
//code
</div>
<partial name="_LoginPartial" />
</div>
</nav>
</div>
</div>
</div>
</div>
Je n'ai pas touché au bootstrap. css (au moins rien qui soit lié à la taille).
J'ai remarqué que si dans la vue _Layout je supprime tout ce qui forme le haut de ma page (mon menu), la largeur de la page est correcte (mais ce n'est évidemment pas une solution).
J'ai donc supprimé une classe div chacun pour chacun pour voir lequel posait le problème mais pas du tout, à chaque fois la largeur est toujours supérieure à la page.
Avez-vous une idée?
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
MODIFIER
Avec la ligne m- 0 , ça se voit comme ça
3 Réponses :
donnez margin: 0; d'abord à la classe row ou m-0 , afin qu'elle ne soit pas plus large ou ne supprime pas la barre horizontale de votre page .
pour la pleine largeur, ajoutez la classe padding: 0; ou p-0 dans votre classe container
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="bs-docs-section">
<div class="row m-0">
<div class="col-lg-12 p-0">
<div class="bs-component">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#C6DA4B">
<div class="container p-0">
<div class="navbar-header">
@Html.ActionLink("Home", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="collapse navbar-collapse" id="navbar">
//code
</div>
<partial name="_LoginPartial">
</div>
</nav>
</div>
</div>
</div>
</div>
je viens d'essayer
Oui, j'ai édité mon message initial avec le code réel. J'ai également essayé de mettre le conteneur comme premier div, mais si je fais cela, mon menu principal ne prend pas toute la largeur de la page.
Aaaaand, ça marche maintenant! J'ai dû ajouter p-0 après col-lg-12! Merci frère
Je ne connais pas grand-chose au bootstrap, mais il semble que vous ayez besoin d'un autre div "conteneur" autour de votre "ligne".
<div class="container">
<div class="row">
[etc]
</div>
</div>
La ligne Bootstrap a une marge gauche et droite par défaut avec -15px, c'est pourquoi la page affiche une barre de défilement horizontale. Pour résoudre ce problème, nous avons un conteneur enveloppé dans la ligne comme .container ou container-fluid (dépend de la disposition).
donnez
margin: 0;d'abord à la classerowoum-0@NishargShah Maintenant, il n'est pas plus large mais il y a un espace vide à gauche et à droite du menu supérieur.
pouvez-vous en donner une image?
ligneà l'intérieur duconteneur@TemaniAfif je ne comprends pas car je n'ai pas de ligne à l'intérieur de mon conteneur (dans cette page). Me suggérez-vous d'ajouter une ligne de classe div juste à l'intérieur de mon conteneur?
il y a une ligne sans conteneur au début de votre code
Je l'ai essayé mais le problème est que l'arrière-plan du menu supérieur ne prend pas toute la largeur de la page maintenant.