Impossible de faire fonctionner le formulaire horizontal de Bootstrap 4 comme prévu

Question

Comment faire un simple Formulaire horizontal Bootstrap qui semble correct sur téléphone, tablette et ordinateur. En particulier, 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 ne veux qu'un petit espace entre l'étiquette et le combo. Ensuite, lorsque la taille de l'écran est trop petite pour contenir l'étiquette et le combo, je veux qu'ils soient empilés.

En particulier, l'exemple de Boostrap utilise la totalité de la largeur de 100 %. Je ne veux pas que le combo soit plus large que nécessaire et je ne veux pas qu'il y ait un grand espace entre l'étiquette et le combo.

J'ai essayé d'ajouter col-auto mais alors les combos ne sont plus alignés horizontalement les uns avec les autres.

J'ai maintenant essayé d'ajouter des valeurs col-[1-12] pour l'étiquette et le combo comme décrit dans https://getbootstrap.com/docs/4.1/components/forms/#column-sizing mais il ne s'est pas empilé correctement quand il est passé sur le petit téléphone.

J'ai ensuite essayé d'utiliser col-md pour que les totaux soient inférieurs à 12, mais cela n'a pas l'air correct sur l'écran principal, car l'étiquette et le combo occupent maintenant le même espace, de sorte qu'ils occupent chacun la moitié de l'écran et ne sont pas proches l'un de l'autre.

 <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>

Answer 1

Le problème est que Flexbox ne fonctionne pas en lignes/colonnes comme le fait un tableau. Vous pouvez utiliser col-sm-auto pour que chaque étiquette soit rétrécie pour s'adapter, mais alors les étiquettes/entrées ne s'alignent pas verticalement sur la page...

On dirait que vous voulez rétrécir la colonne d'étiquettes pour l'adapter à la largeur de l'étiquette la plus large. . Cela pourrait être fait en mettant toutes les étiquettes dans une colonne, et les entrées dans une autre colonne, mais alors chaque étiquette/entrée ne sera pas empilée sur les écrans mobiles.

Il n'y a pas de solution élégante uniquement basée sur Bootstrap pour résoudre ce problème. Vous pouvez utiliser les tableaux, la grille CSS ou l'option décrite par @Toan Lu dans les commentaires.

Option de grille Bootstrap

Je recommande d'utiliser simplement col-sm-2 o col-sm-3 pour les étiquettes (en les ajustant à peu près à l'étiquette la plus large) et text-truncate d'ellipser(...) le texte débordant jusqu'à ce qu'il s'empile 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 se réduisent à la largeur de la plus large. Utilisez text-nowrap pour empêcher les étiquettes de s'enrouler. 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 de tableau transforme les divs en tr/td mais fonctionne également en mode réactif, permettant aux champs de s'empiler verticalement sur les mobiles. Plus d'informations sur [d-table classes](Oui, cela fait partie de Bootstrap 4 : http://getbootstrap.com/docs/4.1/utilities/display/#notation ).

---

Option de grille CSS

Une autre méthode (non-Bootstrap 4) consiste à utiliser la grille CSS. Faites en sorte que la ligne display:grid Utilisez le fr dimensionnement sur les 2 grid-template-columns à travers la rangée.

.d-grid {
  display: grid;
  grid-template-columns: 0fr 1fr;
}

https://www.codeply.com/go/9Z7Hg2tl1H

Answer 2

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">