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

Question

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

问题在于它是宽屏的流畅布局，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。您想要做的是使用您的自定义类覆盖该视图中这些列的最大宽度，如下所示：

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>

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