Twitter Bootstrap 3带标签的内联表单

Question

在搜索到处后,我无法确切地看到我如何设计具有以下设计的内联表单:(在可能的情况下使用bootstrap 3类而不是css自定义)

当用户有一个宽屏幕时:

 Form-Legend

     LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   LabelFieldC: InputFieldC   <Submit Button>

当用户的屏幕较小时:

Form-Legend

    LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   

    LabelFieldC: InputFieldC   <Submit Button>

这个想法是设计最初将所有字段放在一行中,如果它不合适,控件将跳转到下一行,但将Label + Field保持在一起.

此外,如果有一种方法,则每个Label + Input之间的间距大于Label与其Field之间的间距.

最后,如果有一种方法在Label + Field跳转到下一行时有更多的垂直边距.

Answer 1

选项#1:固定列

您可以使用结构混合col-xs-12,col-sm-6并col-lg-3获得1,2或4列.在你的内部form-group,记得使用col-xs-4和修复标签/输入尺寸col-xs-8:

<div class="container">
  <form class="form form-inline" role="form">

    <legend>Form legend</legend>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldA" class="col-xs-4">Field A</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldB" class="col-xs-4">Field B</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldC" class="col-xs-4">Field C</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
    <button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
    </div>

  </form>
</div>

你还需要一些CSS:

// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
    padding-left: 0;
    padding-right: 0;
}
// vertical align label
.form-inline label {
    line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
    width: 100%;
}
// Reset margin-bottom for our multiline form
@media (min-width: 768px) {
  .form-inline .form-group {
    margin-bottom: 15px;
  }
}

您可以根据需要添加任意数量的输入.

Bootply

选项#2:流体柱

为了能够不关心每行的字段数,可以使用以下结构:

<div class="container">
  <form class="form form-inline form-multiline" role="form">

    <legend>Form legend</legend>

    <div class="form-group">
      <label for="InputFieldA">Field A</label>
      <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
    </div>

    <div class="form-group">
      <label for="InputFieldB">Very Long Label For Field B</label>
      <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
    </div>

    <div class="form-group">
      <label for="InputFieldC">F. C</label>
      <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
    </div>

    <div class="form-group">
      <label for="InputFieldD">Very Long Label For Field D</label>
      <input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
    </div>

    <div class="form-group">
      <label for="InputFieldE">Very Long Label For Field E</label>
      <input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
    </div>

    <div class="form-group">
      <label for="InputFieldF">Field F</label>
      <input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-default">Submit Button</button>
    </div>

  </form>
</div>

还有一些CSS线来修复边距:

.form-multiline .form-group {
    margin-bottom: 15px;
    margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
    margin-right: 15px;
}

Bootply

Answer 2

与@zessx 中的选项 #1 相同，但不覆盖 CSS。这也将标签向右对齐以增加标签-控件对之间的空间。“媒体”类可以在不创建自定义类的情况下添加上边距，但在一般情况下，最好有一个自定义类。

<div class="form-horizontal">
    <legend>Form legend</legend>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
    </div>
</div>

引导