forms - 使用流体网格系统在 Bootstrap 上对齐输入

标签 forms twitter-bootstrap responsive-design fluid-layout

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

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

最佳答案

看看这个 jsfiddle:http://jsfiddle.net/kY5LL/18/
我添加了一些 div.row-fluid每行表格的容器和一组额外的输入用于演示。
希望这就是你要找的。

关于forms - 使用流体网格系统在 Bootstrap 上对齐输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12850798/

相关文章:

python - Django 无法更新用户个人资料图片

css - 屏幕宽度达到 800 像素后, Bootstrap 中显示的水平条

html - 在 div bootstrap 之间插入字符

html - 页脚 Logo 未正确对齐并与页脚内容重叠

html - 我的响应图像与标题重叠。

forms - jQuery:使用 "live"方法阻止然后不阻止表单提交

python - "ImportError: cannot import name Browser"与 python Mechanize

javascript - 表单提交后保留数据库查询结果

twitter-bootstrap - 是否可以在不使用自定义 CSS 的情况下使 Bootstrap 3 中的列具有相同的高度?

css - Bootstrap header overlap main Body div 用于响应式网页设计