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>

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>

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

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

1 个答案: