2

我将 simple_form 与 bootstrap 一起使用，并且主要使用水平布局。

我想偶尔在主水平列的字段右侧添加其他字段，但在定位它们时遇到了麻烦。当然，我可以停止使用:class => 'form-horizo​​ntal'并自己定位它们，但我想知道是否有人知道一种在 simple_form 字段右侧添加字段的简单方法。

我尝试使用引导定位，但它破坏了 simple_form 水平布局。

例如，请参见下面的代码。我希望应用按钮立即位于输入字段的右侧。我还有其他用例，我想在右侧放置第二个字段。

我使用了pull-right属性，但它把它带到了页面的右侧。我希望按钮紧挨着输入字段的右侧，有一些间距。有没有一种简单的方法可以在不编写我自己的 CSS 的情况下做到这一点？

<%= link_to 'Apply', apply_primer3_defaults_path, :class => 'btn btn-primary pull-right', :remote => true, :id => 'apply_btn' %>
<%= f.input :primer3_default, :collection => Primer3Setting.pluck(:description), include_blank: false,:title => 'Primer 3 Default' %>

我添加了一个屏幕截图来帮助说明问题。我希望在Primer 3 Std Defaults下拉菜单之后出现Apply按钮。我还将在状态下拉列表的右侧添加一个字段。

在此处输入图像描述

编辑

根据kikicarbonel 的回答（在 erb 中）添加了更改。它有点工作，但非常冗长。

批次详情：

<%= simple_form_for(@batch, :html => { :class => 'form-horizontal'}) do |f| %>
<%= f.error_notification %>

  <div class="form-inputs">
    <div class="row">
      <div class="span12">
        <%= f.input :name, input_html: { value: User.find(@batch.user_id).name }, :disabled => true %>
      </div>
      <div class="span12">
        <%= f.input :status, :collection => Batch::STATUS_OPTIONS %>
      </div>
      <div class="span12">
        <%= f.input :description %>
      </div>
      <div class="span4">
        <%= f.input :primer3_default, :collection => Primer3Setting.pluck(:description), include_blank: false,:title => 'Primer 3 Default' %>
      </div>
    <div class="span4 offset2">
      <%= link_to 'Apply', apply_primer3_defaults_path, :class => 'btn btn-primary', :remote => true, :id => 'apply_btn' %>
      </div>
      </div class="span12">
        <%= f.input :details, :input_html => { :class => "span6", :rows => 5 } %>
      </div>
    </div>
  </div>

截图如下。当我使用offset1时，这些字段正在触摸。看起来我必须制作一些自定义 css 才能在没有所有标记的情况下做我需要的事情。

在此处输入图像描述

4

1 回答 1

2

要使用 simple_form whit bootstrap css 而不实现您的自定义 css，您可以使用这样的代码（我更喜欢使用 haml，但在 erb 中的工作方式类似）：

= simple_form_for(@example) do |f|
  = f.error_notification

  .form-inputs
    .row
      .span4
        = f.input :title
      .span4.offset2
        = f.input :version

结果：

标题：bla...bla...bla 版本：xxx

于 2013-06-26T17:07:41.233 回答