Side by Side Form字段引导

我使用Bootstrap 3.0.3并遵循CSS文档（http://getbootstrap.com/css/#forms）实现内联表单字段。Side by Side Form字段引导

我的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>

但是我的结果是： enter image description here

来源

2014-01-28 Leo Costa

你用什么版本的引导呢？你能提供生成的HTML吗？您的结束标签SECTION没有关闭它正在打开一个新的部分。 – guli

假设您使用的是旧版本的Bootstrap（<3.0），这将是正确的，因此我会检查的第一个应用于元素的任何CSS，即应用的任何填充，这通常是网格列错误分解的罪魁祸首。 –

即时通讯使用引导程序3.0.3 –

我想这是因为你已经错过了这个类的输入控件： 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/

来源

2014-01-28 18:55:25

工作完美！关于如何使用资源和sybmobols使用嵌入式ruby而不是描述每个标签来实现这一点的任何建议？ –

@LeoCosta欢迎您;我无法理解你的问题，你可以更深入地解释它吗？ –

您建议的代码是生成的HTML。如果你看看我在问题中发布的第一个代码，实际上是我的html.erb文件，你可以看到例如我使用f.label：login来代替= user_login的标签。 –

Side by Side Form字段引导

回答

相关问题