Bootstrap 4 - Etiquette de forme de colonne avec largeur maximale

Question

Je construis un formulaire dans une disposition de fluide pleine largeur avec 2 colonnes, la colonne d'étiquettes et la colonne d'entrées. Le problème vient du fait qu'il s'agit d'une disposition fluide avec des écrans larges, une étiquette col-2 est trop grande et col-1 est trop petite.

Y a-t-il un moyen de donner une largeur maximale à la colonne col-form-label ou ai-je besoin de créer du CSS personnalisé pour ces colonnes?

démonstration simple: https://codepen.io/seltix/pen/aWgVjR

<div class="formcontainer"> 

    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label">Label</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div> 
    </div> 

    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label">Longer label</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div> 
    </div> 

    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label">Longer label (extra)</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div> 
    </div> 

</div> 

bootstrap source 4 forme: https://v4-alpha.getbootstrap.com/components/forms/#textual-inputs

merci!

Answer 1

La largeur maximale de col-lg-2 dans le bootstrap 4 est 16.6667% et la limite de taille d'écran est min-width: 992px. Ce que vous voulez faire est de passer outre la largeur maximale de ces colonnes dans ce point de vue en utilisant votre classe personnalisée comme ceci:

CSS

/* Not too wide */ 
    @media(min-width: 992px) { 
     .col-percent-13 { 
      max-width: 13% !important; 
     } 
    } 

/* A little bit narrower */ 
    @media(min-width: 992px) { 
      .col-percent-11 { 
       max-width: 11% !important; 
      } 
     } 

Exemple HTML

<!-- I want all the labels in this form to have a width of 13% --> 
    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label col-percent-13">Label</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div> 

<!-- In another form, I want all the labels to be 11% wide --> 
    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label col-percent-11">Label</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div> 

Modifiez les valeurs de largeur et les noms de classe selon vos préférences.