3

当视口尺寸较小时，表单域会重叠。当空间不足时，有没有办法让表单字段捕捉到下一行？

代码片段：

<form class="compact">
          <div class="row">
            <div class="col-xs-6">
              <section class="form-block">
                <div class="form-group">
                  <label for="aForm_1">This is a form field</label>
                  <input type="text" id="aForm_1" placeholder="Enter value here" size="45">
                </div>
              </section>
            </div>
            <div class="col-xs-6">
              <section class="form-block">
                <div class="form-group">
                  <label for="aForm_2">Overlapping Text</label>
                  <input type="text" id="aForm_2" placeholder="Enter value here" size="45">
                </div>
              </section>
            </div>
          </div>
        </form>

这是 plunker： https ://embed.plnkr.co/ynfi39fIMk1bc8bSBHAp/

重叠文本

4

1 回答 1

5

@X.Vu：请看一下这个 Plnkr：https ://plnkr.co/edit/6YhGmFusvo5EdySzxNpn?p=preview

以及此处的网格文档中的 Clarity Forms： https ://vmware.github.io/clarity/documentation/forms

您需要添加文档中提到的.row类，然后在表单字段中使用这些类。.form-group.col-*

<form class="compact">
        <section class="form-block">
          <div class="form-group row">
            <div class="col-md-2 col-sm-6 col-xs-12">
              <label for="aForm_1">This is a form field</label>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
              <input type="text" id="aForm_1" class="form-control" placeholder="Enter value here" size="45">
            </div>

            <div class="col-md-2 col-sm-6 col-xs-12">
              <label for="aForm_2">Overlapping Text</label>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
              <input type="text" id="aForm_2" class="form-control" placeholder="Enter value here" size="45">
            </div>
          </div>
        </section>
      </form>

还要注意我已经添加了这个.form-control类，input因为这使得它占据了分配给它input的整个空间。.col-*

于 2017-09-06T15:00:07.487 回答