Question

我尝试使用css使我的表单的所有字段显示在一行上。它是我页面上标题导航的一部分，因此重要的是它显示在一行而不是多行。

此处是我的标题代码。

<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来表示所有标记。

我尝试过玩Googles元素工具并将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>

Answer 1

输入中display: inline;的原因不起作用是因为默认情况下simple_form会在每个输入周围包含一个div标记。有两种方法可以解决此问题：

为simple_form
创建自定义包装器
https://github.com/plataformatec/simple_form#the-wrappers-api

将输入和周围div设置为内嵌块：

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

  display: inline-block;

}

虽然理论上不需要.user_nav input css样式，但是有助于指定它，以防万一有其他CSS规则设置输入阻止。如果您确定输入正常，那么您应该能够删除上面CSS定义的第二部分。

Answer 2

通过什么文件说http://twitter.github.com/bootstrap/components.html#navbar

只需将navbar-form类添加到表单中，然后向左拉或向右拉

此外，您应该将它放在li标签内，因为您将它放在ul

中

使所有输入字段在同一行

2 个答案: