3

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

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

4

2 回答 2

10

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

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

希望这就是你要找的。

于 2012-10-13T08:58:29.990 回答
2

首先我们需要清理一下 HTML，第一行有一个额外的关闭 div。

我刚刚添加了一些类来改进样式，以便您了解它是如何工作的。该类 input-block-level是一个引导混合，强制输入像真正的块级元素一样工作。如果您希望它干净并利用 CSS 的好处，则需要这样做。如果你想用 HTML 来做所有的样式，那么你可以用更多的标记和更少的语义方法来做，但我不建议这样做。

希望这可以帮助！

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

于 2012-10-12T05:21:29.240 回答