Twitter bootstrap 将水平表单与内联混合答案

【问题标题】：Twitter bootstrap mix horizontal form with inlineTwitter bootstrap 将水平表单与内联混合
【发布时间】：2012-08-21 22:48:16
【问题描述】：

嗨，我正在尝试将内联形式与水平混合我有http://jsfiddle.net/TNLnP/3/，但我想得到类似的东西

<label><input>
<label><input><label><input><label><input>

【问题讨论】：

标签： forms twitter-bootstrap

【解决方案1】：

<!-- First Form =============================== -->
<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label">A</label>
      <input type="text" class="input-medium">
    </fieldset>
  </form>
</div><!-- end row -->

<!-- Second Form ================================== -->
<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label">B</label>
      <input type="text" class="input-mini" >
      <label class="control-label">C</label>
      <input type="text" class="input-mini" >
      <label class="control-label">D</label>
      <input type="text" class="input-mini" >
      <label class="control-label">E</label>
      <input type="text" class="input-mini" >
    </fieldset>
  </form>
</div><!-- end row -->

在jsfiddle 试试这个。希望它会帮助你。 :)

【讨论】：

我认为主要问题是让它们保持相同的形式

【解决方案2】：

如果您想将两者都保留在同一个 form 元素中，您可以将 form-inline 添加到您的 fieldset：

<form>
<div class="row">
    <fieldset class="form-inline">
        <label class="control-label">A</label>
        <input type="text" class="input-medium">
    </fieldset>
</div><!-- end row -->
<div class="row">
    <fieldset class="form-inline">
        <label class="control-label">B</label>
        <input type="text" class="input-mini" >
        <label class="control-label">C</label>
        <input type="text" class="input-mini" >
        <label class="control-label">D</label>
        <input type="text" class="input-mini" >
        <label class="control-label">E</label>
        <input type="text" class="input-mini" >
    </fieldset>
</div><!-- end row -->
</form>

http://jsfiddle.net/ZWNjw/

【讨论】：

只是补充一点，如果您需要一个带有内联元素的水平表单（如问题中所述），这个答案可能会有所帮助。 stackoverflow.com/questions/12201835/…我今天在找这个，结果到了这里。