div包装器用于提交按钮

时间:2012-06-18 02:22:48

标签: html forms twitter-bootstrap submit

我有一个简单的登录表单:

<form action="/users/login" class="form-inline" id="UserLoginForm" method="post" accept-charset="utf-8">
    <div style="display:none;">
        <input type="hidden" name="_method" value="POST"/>
    </div>
    <input name="data[User][email]" class="input-small" placeholder="E-mail" maxlength="50" type="text" id="UserEmail"/>
    <input name="data[User][password]" class="input-small" placeholder="Password" type="password" id="UserPassword"/>
    <button class='btn' type='submit'>Login</button>
</form>

它使用bootstrap进行样式设置。至于js jquery和AngularJS已加载。

我的问题是,当我显示此表单时,我的提交按钮转到下一行。如果我检查dom,我会在提交按钮周围看到一个<div class="actions">...</div>包装器。如果我从表单定义中省略type='submit'部分,则不会发生这种情况。

我的问题是谁添加了这个包装器,我该如何避免它。

1 个答案:

答案 0 :(得分:1)

如果您看到Twitter Bootstrap的示例,我可以看到他们正在使用form-inline示例的两个类。 Please check this.来自不同类型和形式的按钮。尝试应用well课程。

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>