Impossible de faire fonctionner Bootstrap 4 Horizontal Form comme requis
Comment créer un simple Bootstrap Horizontal Form qui se présente bien sur un téléphone, une tablette et un ordinateur. C'est-à-dire que je veux que les combos soient alignés comme indiqué dans l'exemple, mais je ne veux pas que les combos soient plus grands que nécessaire, et je veux seulement un petit espace entre l'étiquette et le combo. Ensuite, lorsque la taille de l'écran est trop petite pour tenir dans l'étiquette et la liste déroulante, je veux les empiler.
En particulier, l'exemple Boostrap utilise toute la largeur de 100%. Je ne veux pas de cela, je ne veux pas que le combo soit plus large que nécessaire et je ne souhaite pas de grand écart entre l'étiquette et le combo.
J'ai essayé d'ajouter col-auto, mais les combos ne sont plus alignés horizontalement l'un avec l'autre.
J'ai maintenant essayé d'ajouter des valeurs de colonne [1-12] pour l'étiquette et la liste déroulante comme décrit dans https://getbootstrap.com/docs/4.1/components/forms/#column-sizing mais cela ne s'est pas empilé correctement quand va au petit téléphone.
J'ai ensuite essayé d'utiliser col-md pour que les totaux soient inférieurs à 12, mais ils ne semblent pas bien à l'écran principal, car à présent, l'étiquette et le combo prennent le même espace, ils ont donc chacun la moitié de l'écran et ne sont pas proches les uns des autres.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div>
<div class="form-row">
<label for="discogsGenreOverwriteOption" id="discogsGenreOverwriteOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
Genre
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreOverwriteOptionhelp" class="custom-select" name="discogsGenreOverwriteOption" id="discogsGenreOverwriteOption">
<option value="0">
Always replace values
</option>
<option value="1">
Always add values
</option>
<option value="2">
Replace if empty
</option>
<option selected="selected" value="3">
Never Replace
</option>
</select>
</div>
</div>
<div class="form-row">
<label for="discogsGenreFromOption" id="discogsGenreFromOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
From
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreFromOptionhelp" class="custom-select" name="discogsGenreFromOption" id="discogsGenreFromOption">
<option value="0">
Discogs Style
</option>
<option value="1">
Discogs Genre
</option>
<option value="2">
Discogs Style and Genre
</option>
</select>
</div>
</div>
</div>Le problème est que Flexbox ne fonctionne pas dans les lignes/colonnes comme le fait une table. Vous pouvez utiliser col-sm-auto pour que chaque étiquette soit réduite, mais les étiquettes/entrées ne s'aligneront pas verticalement vers le bas de la page ...
Il semblerait que vous souhaitiez réduire la colonne d’étiquette afin qu’elle corresponde à la largeur de l’étiquette la plus large. Cela pourrait être fait en plaçant toutes les étiquettes dans une colonne et les entrées dans une autre colonne, mais ensuite chaque étiquette/entrée ne s'empilera pas sur les écrans mobiles.
Il n’existe pas de solution Bootstrap élégante à ce problème. Vous pouvez utiliser des tableaux, une grille CSS ou l'option décrite par @Toan Lu dans les commentaires.
Option de grille Bootstrap
Je recommanderais simplement d'utiliser col-sm-2 ou col-sm-3 pour les étiquettes (en les ajustant à l'étiquette la plus large) et text-truncate à Ellipsis (...) le texte en débordement jusqu'à ce qu'elles s'empilent verticalement sur le mobile ...
<div class="form-row">
<label class="col-form-label col-sm-2 text-truncate">
Label
</label>
<div class="col-sm-3 col-md-2">
<select>..</select>
</div>
</div>
https://www.codeply.com/go/e3mDrmMv7k
Option de table
Avec cette option, le width:1% est utilisé sur les étiquettes afin qu’elles soient réduites à la largeur la plus large. Utilisez text-nowrap pour empêcher les étiquettes d’emballer. Chaque ligne du formulaire est un d-table-row et chaque étiquette est un d-table-cell...
.col-form-label.d-sm-table-cell {
width: 1%;
}
<div class="container py-3">
<div class="form-row d-table-row">
<label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
Genre
</label>
<div class="col-sm-3 col-md-2">
<select>
..
</select>
</div>
</div>
<div class="form-row d-table-row">
<label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
Longer label here
</label>
<div class="col-sm-3 col-md-2">
<select>
..
</select>
</div>
</div>
</div>
https://www.codeply.com/go/e3mDrmMv7k (voir 2ème option)
L'option table transforme les div en tr/td mais fonctionne également en mode réactif, permettant aux champs de s'empiler verticalement sur mobile. En savoir plus sur [classes de table d] (Oui, partie de Bootstrap 4: http://getbootstrap.com/docs/4.1/utilities/display/#notation ).
Option de grille CSS
Une autre méthode (non-Bootstrap 4) utilise une grille CSS. Créer la ligne display:grid Utilisez la taille fr sur le 2 grid-template-columns dans la ligne.
.d-grid {
display: grid;
grid-template-columns: 0fr 1fr;
}
Fonctionne comme prévu si vous utilisez une version antérieure de bootstrap css:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">