html - Bootstrap 4 - 具有最大宽度的列表单标签

Question

我正在构建一个具有 2 列(标签列和输入列)的全 Angular 流体布局表单。

问题是因为它是宽屏幕的流体布局，col-2 标签太大而 col-1 太小。

有没有办法为 col-form-label 列提供最大宽度，或者我是否需要为该列创建一些自定义 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>

bootstrap 4 表单来源:https://v4-alpha.getbootstrap.com/components/forms/#textual-inputs

Answer 1

bootstrap 4 中 col-lg-2 的最大宽度为 16.6667%，屏幕尺寸边界为 min-width: 992px。您想要做的是使用您的自定义类覆盖该 View 中那些列的最大宽度，如下所示:

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>

根据您的喜好修改宽度值和类名称。