twitter-bootstrap 并排表单字段引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21411100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Side by Side Form Field Bootstrap
提问by Leo Costa
I'm using Bootstrap 3.0.3 and following the CSS documentation (http://getbootstrap.com/css/#forms) to implement a inline form-field.
我正在使用 Bootstrap 3.0.3 并遵循 CSS 文档 ( http://getbootstrap.com/css/#forms) 来实现内联表单字段。
My HTML is:
我的 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>
Generated HTML:
生成的 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>
However my result is:
然而我的结果是：
回答by Irvin Dominin
I think it's because you have missed this class to your input controls: class="form-control"
我认为这是因为您在输入控件中错过了这个类： class="form-control"
Consider to add the placeholder and the class="sr-only"on the labels.
考虑class="sr-only"在标签上添加占位符和。
Ref: http://getbootstrap.com/css/#forms-inline
参考：http: //getbootstrap.com/css/#forms-inline
Code:
代码：
<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/>
