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

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

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>

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

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

Bootstrap 4 - Column Form Label with max width

css

two-columns

dynamic-columns

bootstrap-4