Twitter-Bootstrap 和 Rails 中的表单

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

然后我会得到预期的结果 - 标签和输入字段位于水平布局的同一行上。

我尝试将样式“control-label”添加到 m.label 和 m.text_field 组件上，但对将布局设置为水平没有任何乐趣。

因此，不确定问题是什么，因为工作部分验证了我可以让 Bootstrap 工作，尽管我的 Rails 表单不支持表单水平。

Answer 1

如果您想要使用普通表单（例如，没有 simpleform-b​​ootstrap 或其他 gem），则需要相应地调整表单 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 所说，表单构建器不会生成 bootstrap 框架所需的 html。

一定要检查 bootstrap 示例页面 中所需的 HTML，和/或通过检查 DOM（我发现它并没有很好的记录）。总而言之，您可以像上面一样通过创建自己的表单生成器来手动完成此操作，或使用各种宝石。

另外，请务必查看如何自定义错误 css< /a>，因为默认情况下，当发生验证错误时，该字段会被

包裹，从而破坏所使用的 css 选择器通过引导程序。

Answer 2

问题是字段助手没有为 twitter bootstrap 生成正确的 html。

您可以使用支持 twitter bootstrap 的 simple_form gem。请参阅文档：

https://github.com/plataformatec/simple_form

以下是示例应用程序：https://github.com/rafaelfranca/simple_form-b​​ootstrap

直播演示：http://simple-form-b​​ootstrap.plataformatec.com.br/

Answer 3

我发现 Stephen Potenza 的 bootstrap-form gem 非常有用（并且易于使用）。将 gem 添加到您的 gemfile 中，并在您将使用“form_for”的地方使用“bootstrap_form_for”：

<%= bootstrap_form_for @user do |f| %>
  <%= f.text_field :name, placeholder: "Enter your name" %>
  <%= f.text_field :email, placeholder: "Enter your email" %><br>
  <%= f.password_field :password, placeholder: "Enter a password" %>
  <%= f.password_field :password_confirmation, hide_label: true, placeholder: "Confirm password" %>
<%= f.submit "Sign Up" %>
<% end %>

使整个事情变得轻而易举。

https://github.com/potenza/bootstrap_form

Answer 4

另一种方法可能更简单：

在您的 views//edit.html.erb 中：

<%= form_for(@<model>, :html => {:class => 'form form-container'}) do |f| %>
<%= f.error_messages %>

<%= render '<model>/form',:f=>f %><% end %>

然后，创建一个像 views//_form 这样的文件。 html.erb 将包含启用 Bootstrap 的表单字段，即：

<div class="form-group">
  <%= f.label(:name) %>
  <%= f.text_field(:name, class: "form-control") %>
</div>