这可能是一个初学者的问题,但没有太多的运气,这样做.的背景:
> Rails 3.0.x版本
Bootstrap 2.0 – 使用预编译简单地放在公共/样式表中.
ATT
>尝试使用水平布局进行表单,即在同一行上的输入字段旁边标记.
问题是我无法使表单工作,但可以获得默认的Bootstrap示例代码,以相同的形式正确布局. Rails表单看起来像:
<div class="row-fluid"> <div class="span4 well"> <%= form_for @member,:html => {:class => "form-horizontal"} do |m| %> <fieldset> <%= m.label :title %> <%= m.text_field :title %> <%= m.label :first_name %> <%= m.text_field :first_name %> <% end %> </div> </div>
请注意,form_for方法具有如Bootsrap form CSS所述的“水平”类
当显示标签时,例如标题,在一行左边调整,然后在下一行是输入字段,也左调.
<div> <form class="form-horizontal"> <fieldset> <legend>Legend text</legend> <div class="control-group"> <label class="control-label" for="input01">Text input</label> <div class="controls"> <input type="text" class="input-xlarge" id="input01"> <p class="help-block">Supporting help text</p> </div> </div> </fieldset> </form> </div>
然后我在水平布局中在同一行获得预期结果 – 标签和输入字段.
我已经尝试在m.label和m.text_field组件中添加了“control-label”样式,但是将布局设为水平没有任何兴趣.
因此,不确定问题是什么,因为工作部分验证我可以让Bootstrap工作,尽管我的Rails表单不符合表单 – 水平.
解决方法
如果你想要做形式的香草(如在没有simpleform-bootstrap或其他宝石),你需要相应地形成HTML格式:
<div class="row-fluid"> <div class="span4 well"> <%= form_for @member,:html => {:class => "form-horizontal"} do |m| %> <fieldset> <legend>Member Form</legend> <div class="control-group"> <%= m.label :title,:class => "control-label" %> <div class="controls"> <%= m.text_field :title,:class => "input-xlarge" %> </div> </div> <div class="form-actions"> <%= m.submit :class => "btn btn-primary" %> </div> </fieldset> <% end %> </div> </div>
正如Arun Kumar Arjunan所说,表单构建器不会生成引导框架所需的html.
肯定要查看bootstrap example pages中所需的HTML和/或通过检查DOM(我发现它没有很好的记录).总而言之,您可以通过创建自己的form builder或使用各种宝石手动进行操作,如上所述.
另外作为旁注,请确保查看how to customize the errors css,因为默认情况下,当出现验证错误时,该字段由< div class =“field_with_errors”>打破引导程序使用的css选择器.