形式 – 使用流体网格系统在引导程序上对齐输入

发布时间：2020-12-17 21:21:36 所属栏目：安全来源：网络整理

导读：我正在创建一个表单,要求用户输入他们的姓名和电子邮件地址.表单的第一行对于名称的每个部分并排有两个输入,第二行有一个输入用于电子邮件地址,该输入应与第一行组合的宽度相同.我正在尝试使用流体网格系统,但不能将第二行与第一行对齐. form action="/subsc

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

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

解决方法

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

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

希望这是你想要的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!