Rails中的Twitter-Bootstrap和Forms

Question

这可能是一个初学者的问题,但没有太多的运气来实现这一目标.的背景:

1. Rails 3.0.x版
2. Bootstrap 2.0 - 使用预编译简单地放入公共/样式表.ATT
3. 尝试使用水平布局执行表单,即在同一行的输入字段旁边标记.

问题是我无法使表单工作,但可以获得默认的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方法具有form-horizo​​ntal类,如Bootsrap形式CSS中所述

显示时,标签(例如标题)位于左侧调整的一行上,然后下一行是输入字段,也是左侧调整的.

现在,如果我为表单包含一些示例Bootstrap代码,例如:

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

然后我得到预期的结果 - 标签和输入字段在水平布局的同一行.

我已经尝试将样式"control-label"添加到m.label和m.text_field组件上,但没有将布局设置为水平的乐趣.

因此,不确定问题是什么,因为工作部分验证我可以使Bootstrap工作,虽然我的Rails表单它不尊重表单水平.

Answer 1

如果你想做形式vanilla(如,没有simpleform-b​​ootstrap或其他宝石),你需要相应地形成表单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.

绝对检查引导程序示例页面中所需的HTML ,和/或通过检查DOM(我发现它没有真正详细记录).总而言之,您可以通过创建自己的表单构建器或使用各种宝石手动完成,如上所述.

另外作为旁注,请务必查看如何自定义错误css,因为默认情况下,当发生验证错误时,该字段将被<div class ="field_with_errors">破坏bootstrap使用的css选择器包装.