3

我有一堆要水平渲染的部分，使用 form-inline (twitter bootstrap)。如果单独指定它们可以正常工作，但是当使用 :defaults 指定时，该类不会出现。

%ul.nav.nav-tabs#tab
  %li= link_to "General", "#client_tab1", 'data-toggle'=>"tab"
  %li= link_to "Applications", "#client_tab2", 'data-toggle'=>"tab"
= simple_form_for @client, defaults:{input_html:{class:'form-inline'}}, :html=>{:class=>"client tab-content"} do |f|
  #client_tab1.tab-pane.fade.in.active
    = render :partial => "client", :locals => {:f => f}
  #client_tab2.tab-pane.fade.in
    = render :partial => "applications/applications", :locals => {:f => f}
  .actions
    = f.button :submit, class:"btn-primary", value: "Save"

部分看起来像：

.status
  .span3
    = f.label :status
    = f.collection_select :status_id, selection_list(Status), :last, :first
    %br
    = f.input :open_date, :as => :jdate
    %br
    = f.label :assigned_to
    = f.collection_select :assigned_to_id, selection_list(User), :last, :first
    %br
    .form-inline
      = f.label :assistant
      = f.collection_select :assistant_id, selection_list(User), :last, :first
    %br

在上面，使用明确的 .form-inline，一切都按预期工作。但是根据https://github.com/plataformatec/simple_form下面的示例代码， :defaults 中定义的类应该应用于所有方法。事实上，他们不是。

<%= simple_form_for @user, :defaults => { :input_html => { :class => 'default_class' } } do |f| %>
  <%= f.input :username, :input_html => { :class => 'special' } %>
  <%= f.input :password, :input_html => { :maxlength => 20 } %>
  <%= f.input :remember_me, :input_html => { :value => '1' } %>
  <%= f.button :submit %>
<% end %>

谁能解释为什么会这样或者我做错了什么？

4

1 回答 1

1

几件事：

  1. 通过阅读 twitter bootstrap 文档，看起来 form-inline 类在应用于输入字段的父元素时有效，例如表单元素，或者在您的示例中为 div。

您可以在此处看到（取自样式表）：

.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  *zoom: 1;
}
  1. 我阅读了 simple_form 文档，意思是默认值仅适用于 f.input 方法。我认为这意味着这意味着提供给 input_html 的内容将应用于 f.input 生成的所有元素，包括标签和输入字段本身。但是，看起来 f.input 不会像 div 那样为输入字段生成任何父元素。

因此，由于 twitter bootstrap 仅在有父元素（例如 div，其类为 form-inline）时才应用样式，因此将 form-inline 应用于输入字段无关紧要。

将 .form-inline 保留在部分中似乎并没有增加太多，为什么不把它保留在那里呢？

于 2012-05-15T22:14:59.490 回答