ruby-on-rails – Rails中的Twitter-Bootstrap和Forms

这可能是一个初学者的问题,但没有太多的运气,这样做.的背景：

> 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所述的“水平”类

当显示标签时,例如标题,在一行左边调整,然后在下一行是输入字段,也左调.

现在,如果我包括一些示例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>

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

我已经尝试在m.label和m.text_field组件中添加了“control-label”样式,但是将布局设为水平没有任何兴趣.

因此,不确定问题是什么,因为工作部分验证我可以让Bootstrap工作,尽管我的Rails表单不符合表单 – 水平.

解决方法

如果你想要做形式的香草(如在没有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.

肯定要查看bootstrap example pages中所需的HTML和/或通过检查DOM(我发现它没有很好的记录).总而言之,您可以通过创建自己的form builder或使用各种宝石手动进行操作,如上所述.

另外作为旁注,请确保查看how to customize the errors css,因为默认情况下,当出现验证错误时,该字段由< div class =“field_with_errors”>打破引导程序使用的css选择器.