使用流体网格系统引导对齐输入(Aligning inputs on bootstrap using

我创建要求用户输入自己的姓名和电子邮件地址的形式。 形式的第一行具有由侧的名称的每个部分的两个输入端和第二线具有用于这应该是相同的宽度，所述第一线相结合的电子邮件地址的一个输入。 我试图使用流体网格系统，但不能排队的第二排与第一。

<form action="/subscriptions" method="post">
  <fieldset>
    <div class="control-group">
       <label class="control-label" for="name">Name</label>
       <div class="controls row-fluid">
          <input class="span2" id="first_name" name="first_name" placeholder="First" required="required" type="text">
          <input class="span2" id="last_name" name="last_name" placeholder="Last" required="required" type="text">
       </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="email">Email</label>
      <div class="controls row-fluid">
      <input class="span4" id="email" name="email" type="email">
    </div>
   </div>
 </fieldset>
</form>​

http://jsfiddle.net/sguha095/v4amX/

Answer 1:

看看一个这个jdfiddle： http://jsfiddle.net/kY5LL/18/

我加了一些div.row-fluid每个表单的行和一个额外的一套示范输入容器。

希望这是你所期待的。

Answer 2:

首先，我们需要清理HTML一点，对第一线的额外收股利。

我只是增加了一些提高班的造型，所以你可以看到它是如何工作的。 该input-block-level类是自举混入以迫使输入到像真正的块级元素。 如果你想这是干净的，并充分利用CSS的好处这是必要的。 如果你想要做的所有HTML的造型，那么你就可以有更多的标记，少语义方法做到这一点，但我会建议反对。

希望这可以帮助！

http://jsfiddle.net/kY5LL/12/

文章来源: Aligning inputs on bootstrap using the Fluid Grid System