Salut ! Ça va faire + de 2h que je galère avec Bootstrap avec le layout ! Je me mélange les pinceaux dans mon code j'essaye des choses, je retourne la doc mais je capte pas super bien comment ça marche...
Mon projet est sur ReactJS mais c'est pas très important pour avoir de l'aide
Voici le code :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 <main className="row"> <section className="login col-4"> <h2 className="logtitle row justify-content-center">Connecte toi !</h2> <form className="col justify-content-center"> <div className="maillog col align-self-center"> <img className="mailsvg" src={mailsvg}/> <input type="text" className="logmail" placeholder="Adresse mail ou téléphone" name="LogMail"/> </div> <div className="passlog"> <img className="locksvg" src={locksvg}/> <input type="password" className="logpass" placeholder="Mot de passe" name="LogPass"/> </div> <div> <div> <input type="checkbox" className="logmemory" name="memory" checked/> <label for="memory">Se souvenir de moi</label> </div> <div> <Link className="loglost" to="#">Mot de passe oublié</Link> </div> </div> <input type="submit" className="logsubmit" value="Se connecter"/> </form> </section> <section className="register col-8"></section> </main>
Sur la première ligne, je mets en row mes 2 sections, sur l'élément parent... jusque là pas de souci, les width des 2 sections sont réglés avec un col-4 pour la partie gauche et col-8 pour la partie droite ! Ok ! Jusqu'à la c'est relativement simple et clair ! Mais c'est après que ça se complique... j'arrive à centrer le H2 en lui disant directement row et justify-content-center ! Là déjà je pige moyen car le h2 n'a pas d'élément enfant donc pourquoi le row et justify-content-center font effet sur lui directement ?? Après on rentre dans un form qui est composé de 4 éléments (3 divs et 1 input de type submit) qui doivent être en column et centré dans cette section... Bon ok.. On va mettre col au form et je veux que tous les éléments enfants de la balise form soit centrés... Ok d'après la doc faut mettre justify-content-center aussi.... Mais je suis en col donc ça marche pas ! Dans ma console ça me dit que le justify content n'est pas pris en compte car il ne s'agit pas d'un élément flex blablabla --'... donc je vais essayer avec align-items-center... marche pas non plus... Bref je vais pas expliquer tous mes essais que je fais depuis 2 - 3h mais là j'abdique ! Il parait que le CSS est plus simple avec Bootstrap haha.... Plus sérieusement je veux bien une explication ! Merci
ps:dsl les modos si je ne suis pas dans la bonne partie du fofo !
Partager