Question

我想让我的表单看起来像这样：

Label1
[Input                       ]
Label2
[Dropbox][Input         ][btn]
ArbitraryLabel3
[Input                       ]
ArbitraryLabel4
[Input                       ]

它是水平和垂直的混合，但我希望label2上的输入看起来像是使用form-inline，但其余的表单是水平对齐的。有没有一种正确的方法来做这个而不是使用col？当调整页面大小时，col类使输入形成它们之间的间隙。

编辑：以下是最小代码示例：

<form>
  <div class="row">
  <div class="form-group">
    <label> Label 1 </label>
    <input type="text" class="form-control">
  </div>
  </div>
  <div class="row">
  <div class="form-group">
    <label> Label 2 </label>
      <select class="form-control">
        <option selected value="opt1"> opt1 </option>
        <option value="opt2"> opt2 </option>
      </select>
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="submit">
          <span class="glyphicon glyphicon-search"></span>
        </button>
      </span>
  </div>
    </div>
</form>

Answer 1

使用您提供的字段示例，可以在任何类型的表单布局中使用Bootstrap's input groups。它支持标签/提示/文本，复选框，单选按钮，按钮，分段/分组/多个按钮，下拉按钮，以及一个＆＃34;真正的＆＃34;表格输入类型。

它不支持<textarea>或<select>，也不支持单行中的多个表单字段。

示例http://jsfiddle.net/zfachxus/1/

<div class="input-group">

    <!-- DROPDOWN BUTTON -->
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <!-- add links here -->
        </ul>
    </div>

    <!-- TEXT FIELD -->
    <input type="text" class="form-control" placeholder="Input box" aria-label="...">

    <!-- PLAIN BUTTON -->
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            Button
        </button>
    </span>

</div>

使用每行中单个输入和多个输入的混合行创建引导表单

1 个答案: