Imbrication row/col, vérification de mon code
Bonjour,
Voici la structure de mon HTML(JSX) pour l'instant, j'utilise Bootstrap v4.5.3:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div id="root">
<div class="container-fluid h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-xs-auto">
<form>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="userLogin">Identifiant</label>
<div class="col-sm-8"><input id="userLogin" class="form-control" type="text" placeholder="Enter login"></div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="userPassword">Mot de passe</label>
<div class="col-sm-8"><input id="userPassword" class="form-control" type="password" placeholder="Password"></div>
</div>
<div class="d-flex justify-content-end"><button type="submit" class="btn btn-primary">Submit</button></div>
</form>
</div>
</div>
</div>
</div> |
Première question:
Ma balise <form> n'a pas de classe, cela posera t'il problème, faut-il corriger quelque chose? Par exemple rajouter une classe .row à <form> et créer un <div class="col"> enfant pour y mettre mes éléments de formulaire?
Deuxième question:
J'ai utilisé col-xs-auto (4e ligne) pour que la colonne qui contient mon formulaire s'étire selon le contenu, ça semble le cas mais pourtant mes labels (qui sont en inline avec les inputs) sont un peu compressés et s'affichent sur 2 lignes ... c'est dommage, j'aimerai qu'ils prennent toute la place nécessaire pour s'afficher sur seule ligne, comment faire?
Merci d'avance pour vos réponses/conseils!
