ブートストラップ4 - 最大幅のカラムフォームラベル

Question

私は2列、ラベルカラムと入力カラムを持つ全幅流体レイアウトでフォームを構築しています。

ワイドスクリーンの流体レイアウトで、col-2ラベルが大きすぎ、col-1が小さすぎるため問題です。

col-form-labelカラムに最大幅を与える方法はありますか、このカラムにsommeカスタムCSSを作成する必要がありますか？

簡単なデモ：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> 

ブートストラップ4形式のソース：https://v4-alpha.getbootstrap.com/components/forms/#textual-inputs

感謝！

Answer 1

ブートストラップ4のcol-lg-2の最大幅は16.6667%であり、画面サイズの境界はmin-width: 992pxです。

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

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

幅の値とクラス名を好みに合わせて変更します。