使用流体网格系统在自举上对齐输入 [英] Aligning inputs on bootstrap using the Fluid Grid System

问题描述

我正在创建一个表单，要求用户输入他们的姓名和电子邮件地址。表单的第一行为名称的每个部分并排输入两个输入，第二行为电子邮件地址输入一个输入，该输入的宽度应与组合的第一行相同。我试图使用流体网格系统，但不能排队第一行。

 < form action =/ subscriptionsmethod =post> 
< fieldset> 
< div class =control-group> 
< label class =control-labelfor =name>名称< / label> 
< div class =controls row-fluid> 
< input class =span2id =first_namename =first_nameplaceholder =Firstrequired =requiredtype =text> 
< input class =span2id =last_namename =last_nameplaceholder =Lastrequired =requiredtype =text> 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-labelfor =email>电子邮件< / label> 
< div class =controls row-fluid> 
< input class =span4id =emailname =emailtype =email> 
< / div> 
< / div> 
< / fieldset> 
< / form> 
  

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

解决方案

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

我为表单的每行添加了一些 div.row-fluid 容器，并为演示添加了一组额外的输入。

希望这是您要找的。

I am creating a form that requires the user to input their name and email address. The first line of the form has two inputs side by side for each part of the name and the 2nd line has one input for the email address that should be the same width as the first line combined. I'm trying to use the fluid grid system but can't line up the 2nd row with the first.

<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/

解决方案

Have a look a this jdfiddle: http://jsfiddle.net/kY5LL/18/

I added some div.row-fluid containers per row of your form and one extra set of inputs for demonstration.

Hope this is what you were looking for.

这篇关于使用流体网格系统在自举上对齐输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！