自舉4 - 與最大的列表標籤寬度

Question

我建立一個形式在全寬度流體佈局2列，標籤列和輸入列。

問題是因爲它與寬屏流體佈局的COL-2標籤太大而COL-1太小。

有沒有辦法給出一個最大寬度山坳形式的標籤欄或我需要爲此列上創建索姆自定義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> 

修改寬度值和類名到您的偏好。