Je tente de modifier le pied de page de mon site et, pour une raison quelconque, seules certaines des divs se présentent comme une largeur complète: https://www.lpp-leicester.org.uk/ . Vous pouvez voir que la Light Blue Div et la Dark Grey Div montrent correctement la largeur maximale, mais le reste du pied de page a une marge blanche.
Je suis très novice à n'importe quel type de codage, donc je suis éventuellement manquant quelque chose d'évident. P>
Je n'étais pas sûr de quel code inclure avec cette question, à court de coller mon fichier de pied de page entier, mais voilà ... p>
<div class="container">
<div class="row justify-content-center">
<img src="/wp-content/uploads/2019/01/jvj.png" style="height:130px">
</div>
<div class="row justify-content-center">
<div class="col-sm-9" >
<div class="menuborder">
<div class="row">
<div class="col-sm-4">
<p style="text-align:center; vertical-align:middle; "><a style="text-decoration:underline; font-weight:bold;color:#32373C !important;" href="/privacy-policy/">Privacy Policy</a></p>
</div>
<div class="col-sm-4">
<p style="text-align:center; vertical-align:middle; "><a style="text-decoration:underline; font-weight:bold;color:#32373C!important;" href="/contact/"> Contact Us</a></p>
</div>
<div class="col-sm-4">
<p style="text-align:center; vertical-align:middle; "><a style="text-decoration:underline; font-weight:bold;color:#32373C!important;" href="/faq/">FAQ</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" style="margin-top:1em;">
<p style="text-align: center; color:#32373C">© Copyright Leicester Primary Partnership 2019 | This site is maintained by the <a style="color:#32373C !important; text-decoration:underline !important;" href="https://www.sdsa.net/">School Development Support Agency</a><p>
</div>
</div>
</div>
</div>
5 Réponses :
une solution rapide pour vous consiste à ajouter la classe code> de la classe code> à votre Je viens de le faire dans le navigateur Dev Outils et cela a fonctionné à droite une façon. p> SO: P> FULLWIDTH-BLEU CODE> DIV <div class="row fullwidth-blue">
... // your footer code
</div>
Salut Padar, merci beaucoup pour votre réponse - j'ai fait l'ajout de l'ajout que vous avez suggéré et qu'il a bien fonctionné - maintenant, je n'ai que une marge blanche d'un côté?
Comme @ Rob.M dit ci-dessous, je pense enlever la largeur 100% sur .fulwidth-blue résoudra ceci. Joyeux codage!
Salut Perlerau, malheureusement quand je retire la largeur complète 100%, il le brise complètement. J'ai réussi à obtenir la largeur de div pleine largeur mais maintenant mon image refuse de centrer!
@maestrovedeale voir ma réponse
Vous utilisez un système de grille Flud / Flex où vous devez ajouter des classes . Votre conteneur EDIT: Votre FULLWIDTH-BLEU n'a pas cette classe. Il suffit de l'ajouter et ça fonctionne. largeur: 100%; brise le style. Il suffit de le retirer de l'élément.
Bonjour insomnie, merci beaucoup pour votre réponse - j'ai fait l'ajout que vous avez suggéré que vous avez suggéré et qu'il a bien fonctionné - maintenant, je n'ai qu'une marge blanche d'un côté.
Bonjour insomnie, malheureusement si je retire la largeur complète 100%, il le brise pleinement. J'ai réussi à obtenir la largeur de div pleine largeur maintenant, mais je me débats maintenant pour centrer mon image.
Il semble que votre conteneur "fluide-conteneur" a un rembourrage de 15px à gauche et à droite, ce qui est contrebalancé dans votre enfant divs par une "marge-gauche: -15px; marge-droite: -15px" (trouvé dans la classe "rangée"). Puisque votre page de pied de page n'hérite pas de cette classe et est également un enfant de "fluide conteneur" Les frontières que vous voyez sont simplement héritées du parent.
Vous définissez un conteneur qui ajout de marges.
Vous devez utiliser votre code comme celui-ci: p>
p>
.fullwidth-blue{
text-align:center;
}Bonjour Bill, merci pour votre réponse - j'ai supprimé le conteneur et ma div est maintenant pleine largeur mais mon image n'est plus centrée!
Ajouter texte-align: centre; à votre fichier CSS.
Les images dans BOOSTRAP4 ont leur classe pour la rendre centrée et la structure est conteneur> rangée> col, ne doit pas mettre une image à l'intérieur de la ligne. Voir ma réponse
C'est une mauvaise grille de bootstrap, la grille dit la rangée> Col> [ getbootstrap.com/docs/ 4.3 / Mise en page / grille /] ...
Supprimer la largeur: 100%.
<div class="fullwidth-blue">
<div class="topBgColor">
<div class="container">
<div class="row">
<div class="col">
<h3 class="text-center">Sign up for the LPP weekly newsletter here today!</h3>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col">
<img src="..." class="rounded mx-auto d-block" alt="...">
</div>
</div>
<div class="row">
<div class="col-12 col-sm-4 margin-bottom-10">...</div>
<div class="col-12 col-sm-4 margin-bottom-10">...</div>
<div class="col-12 col-sm-4 margin-bottom-10">...</div>
</div>
</div>
</footer>
</div>
S'il vous plaît ajouter votre code.