2

css を使用して、フォームのすべてのフィールドを 1 行に表示しようとしています。これは私のページのヘッダー ナビゲーションの一部であるため、複数行ではなく 1 行で表示することが重要です。

これが現時点での私のヘッダーコードです。

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="i-bar"></span>
        <span class="i-bar"></span>
        <span class="i-bar"></span>
      </a>
      <a class="brand" href="/">Bandini</a>
      <div class="container nav-collapse">
        <ul class="nav">
            <li><%= link_to "Clients", "/clients"  %></li>
            <li><%= link_to "Jobs", "/jobs"  %></li>
        </ul>
        <ul class="user_nav">
                <%= render :partial => "sessions/manager" %>
            </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

部分は、ユーザーのログイン状態に応じて別の<%= render :partial => "sessions/manager" %>部分を表示する部分を指します。

ログアウトしている場合はログイン フォームが表示され、ログインしている場合は現在のユーザーの電子メール アドレスとサインアウト リンクが表示されます。

これが私のログインフォームです。

<%= simple_form_for("user", :url => user_session_path, :html => {:id => "sign_in", :class => 'form-inline' }, :remote => true, :format => :json) do |f| %>
    <%= f.input :email, :placeholder => 'Email' %>
    <%= f.input :password, :placeholder => 'Password' %>
    <%= f.submit 'Login' %>
    <%= link_to "Forgot your password?", new_password_path('user') %>
  <% end %>

このフォームは、すべてのマークアップに ajax と simple_form gem を使用しています。

Google の要素ツールをいじってdisplay: inline;、すべての入力フィールドに追加しようとしましたが、そのような運はありませんでした。

誰かが私を助けたり、正しい方向に向けたりできますか?

編集：HTML生成..

            <ul class="user_nav">
                  <form accept-charset="UTF-8" action="/users/sign_in" class="simple_form form-inline" data-remote="true" id="sign_in" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="fN0oKIlpnhS0WLZpKQafln+182IT1ONVuDP0eRtT8fg=" /></div>
    <div class="control-group email required"><label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label><div class="controls"><input class="string email required" id="user_email" name="user[email]" placeholder="Email" size="50" type="email" /></div></div>
    <div class="control-group password required"><label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label><div class="controls"><input class="password required" id="user_password" name="user[password]" placeholder="Password" size="50" type="password" /></div></div>
    <input name="commit" type="submit" value="Login" />
    <a href="/users/password/new">Forgot your password?</a>
  </form>

            </ul>
4

2 に答える 2

4

入力が機能しない理由display: inline;は、デフォルトで simple_form がすべての入力を div タグで囲むためです。この問題を解決するには、次の 2 つの方法があります。

  1. simple_form のカスタム ラッパーを作成する

    https://github.com/plataformatec/simple_form#the-wrappers-api

  2. 入力と周囲の div の両方をインライン ブロックに設定します。

    .user_nav div, .user_nav input, .user_nav input[type="submit"] {

  display: inline-block;

}

css スタイルは.user_nav input理論的には必要ありませんが、ブロックする入力を設定する他の CSS ルールがどこかにある場合に備えて、指定すると役立ちます。入力が正常に動作していることが確実な場合は、上記の CSS 定義の 2 番目の部分を削除できるはずです。

于 2012-05-27T19:14:35.443 に答える
1

ドキュメンテーションによるhttp://twitter.github.com/bootstrap/components.html#navbar

navbar-form クラスをフォームに追加して、左または右に引くだけです

また、ul 内に配置しているため、li タグ内に配置する必要があります。

于 2012-05-27T20:28:17.027 に答える