并排表单字段引导程序

Question

我正在使用Bootstrap 3.0.3并遵循CSS文档（http://getbootstrap.com/css/#forms）来实现内联表单字段。

我的HTML是：

<form class="form-inline" role="form">
  <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
    <div class="form-group">
      <div><%= f.label :login %>
      <%= f.text_field :login %></div>
    </div>
    <div class="form-group">
      <div><%= f.label :password %><br />
      <%= f.password_field :password %></div>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  <% end %>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

生成的HTML：

<form class="form-inline" role="form">
  <div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="**" type="hidden"></div>
    <div class="form-group">
      <div><label for="user_login">Login</label>
      <input id="user_login" name="user[login]" type="text"></div>
    </div>
    <div class="form-group">
      <div><label for="user_password">Password</label><br>
      <input id="user_password" name="user[password]" type="password"></div>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
</form>  <button type="submit" class="btn btn-default">Sign in</button>

但是我的结果是：

Answer 1

我认为这是因为你错过了这个课程的输入控件：class="form-control"

考虑在标签上添加占位符和class="sr-only"。

参考：http://getbootstrap.com/css/#forms-inline

代码：

<form class="form-inline" role="form">
  <div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="**" type="hidden"></div>
    <div class="form-group">
      <div><label lass="sr-only" for="user_login">Login</label>
      <input id="user_login" name="user[login]" type="text" class="form-control"></div>
    </div>
    <div class="form-group">
      <div><label lass="sr-only" for="user_password">Password</label><br>
      <input id="user_password" name="user[password]" type="password" class="form-control"></div>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
 <button type="submit" class="btn btn-default">Sign in</button><form/>

演示：http://jsfiddle.net/IrvinDominin/4vsDa/