navbar-right 无法使用 bootstrap 3 在 form_tag 中工作

Question

在使用form_tag 时，我无法让navbar-right 正常工作。当我使用form_tag 时，我似乎失去了所有navbar-right 样式，并且所有内容都向左浮动。如果我只使用纯 HTML <form> 标记，那么一切都会按预期向右浮动。

这是我的 gem 版本：

rails (4.1.1)
bootstrap-sass (3.1.1.1)

这是我正在使用但不起作用的代码：

<header class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
              data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Football Pool Mania", root_path, 
                  class:'navbar-brand' %>
    </div>
    <div class="navbar-collapse collapse">
<!-- This is the line with an issue -->

      <%= form_tag(sessions_path, class: 'navbar-form nabvar-right', 
                   role: 'form') do %>
<!-- -->
        <div class="form-group">
          <%= text_field_tag :email, params[:email],
              class: 'form-control', placeholder: "Email"%>
        </div>
        <div class="form-group">
          <%= password_field_tag :password, nil,
              class: 'form-control', placeholder: "Password"%>
        </div>
        <%= submit_tag "Sign in", class: "btn btn-primary" %>
      <% end %>
    </div><!--/.navbar-collapse -->
  </div>
</header>

这是使用 form_tag 时的样子：

这是不起作用时的原始 HTML：

<header class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
              data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Football Pool Mania</a>
    </div>
    <div class="navbar-collapse collapse">
      <form accept-charset="UTF-8" action="/sessions" class="navbar-form nabvar-right" method="post" role="form"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="mhM8pSrINO2rfH9JbRm7I4J+iSCAsrEnoYVBPDcIYu0=" /></div>
        <div class="form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="text" />
        </div>
        <div class="form-group">
          <input class="form-control" id="password" name="password" placeholder="Password" type="password" />
        </div>
        <input class="btn btn-primary" name="commit" type="submit" value="Sign in" />
      </form>
    </div><!--/.navbar-collapse -->
  </div>
</header>

如果我将 form_tag 行替换为<form> HTML 行，如下所示，那么它可以工作。

          <form class="navbar-form navbar-right"action="/sessions" method="post" role="form" >

这是使用纯 HTML 时的外观（也是我想要的）：

![enter image description here][2]

这是它工作时的原始 HTML：

<header class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
              data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Football Pool Mania</a>
    </div>
    <div class="navbar-collapse collapse">
      <form class="navbar-form navbar-right" role="form" >
        <div class="form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="text" />
        </div>
        <div class="form-group">
          <input class="form-control" id="password" name="password" placeholder="Password" type="password" />
        </div>
        <input class="btn btn-primary" name="commit" type="submit" value="Sign in" />
      </form>
    </div>
  </div>
</header>

我唯一能注意到的是 form_tag 为我的会话管理添加了真实性令牌的输入，但我不确定为什么这会破坏表单本身的样式。我一直在寻找这个太久无济于事。

任何帮助将不胜感激！

谢谢

Answer 1

表格未向右对齐，因为您的代码中有错字。

您错误地输入了 navbar-right 类（在您的示例中是 nabvar-right）。

<!-- <form accept-charset="UTF-8" action="/sessions" class="navbar-form nabvar-right" method="post" role="form"> -->
<form accept-charset="UTF-8" action="/sessions" class="navbar-form navbar-right" method="post" role="form">

这是一个有效的 jsfiddle：http://jsfiddle.net/SJu82/

我使用了差异工具来发现差异。