0

私は単純なログインフォームを持っています:

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

スタイリングにはブートストラップを使用しています。js は jquery と AngularJS が読み込まれています。

私の問題は、このフォームを表示すると、送信ボタンが次の行に移動することです。dom を調べると<div class="actions">...</div>、送信ボタンの周りにラッパーが表示されます。type='submit'フォーム定義から一部を省略した場合、これは発生しません。

誰がこのラッパーを追加しているのか、どうすればそれを回避できるのかという私の質問。

4

1 に答える 1

1

Twitter Bootstrap の例を見ると、form-inlineたとえば 2 つのクラスを使用していることがわかります。これを確認してください。ボタン付きのさまざまなタイプとフォーム。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>
于 2012-06-18T06:37:53.017 に答える