HTML 行与 simple_form 2.1.2 和 Bootstrap 3/Rails 3.2 未对齐

Question

这是通过 simple_form 2.1.2 呈现的 HTML 页面，在 Bootstrap 3 和 Rails 3.2 上有 3 行未对齐。

我们知道 Bootstrap 3 与 simple_form 2.1 和 Rails 3.2 不兼容。所有行的 HTML 源代码具有相同的结构（当然是不同的名称）。我们还发现，不同版本的 Firefox（较新版本可能只有 2 个未对齐的行）和浏览器类型（IE 10.0 可能有 5 个未对齐的行），未对齐的行数也不同。此外，通过将 <div></div> 添加到 simple_form html.erb 上的未对齐行的 <%=f.input ..%> 中，可以将一行拖回内联并将未对齐的行减少 1。

是什么原因造成的错位？我们有办法解决它吗？

这里是simple_form.css.scss:

.simple_form div.input {
  margin-bottom: 10px;
}

.simple_form label {
  float: left;
  width: 140px;
  text-align: right;
  margin: 2px 10px;
}

.simple_form input.readonly {
  background: transparent; 
  border: 0;
}

div.boolean, .simple_form input[type='submit'] {
  margin-left: 120px;
}

div.boolean label, label.collection_radio {
  float: none;
  margin: 0;
}

label.collection_radio {
  margin-right: 10px;
  vertical-align: -2px;
  margin-left:   2px;
}

.field_with_errors {
  background-color: #ff3333;
}

.simple_form .error {
  clear:   left;
  color:   black;
  display: block;
  margin-left: 120px;
  font-size:    12px;
}

.simple_form .hint {
  clear: left;
  margin-left: 120px;
  font-size:    10px;
  color: #555;
  display: block;
  font-style: italic;
}

input.radio {
  margin-right: 5px;
  vertical-align: -3px;
}

input.check_boxes {
  margin-left: 3px;
  vertical-align: -3px;
}

label.collection_check_boxes {
  float: none;
  margin: 0;
  vertical-align: -2px;
  margin-left:   2px;
}

这里是 html.erb:

<%= simple_form_for @part do |f| %>  
      <%= f.input :name, :label => t('Part Name') %>  
      <%= f.input :part_num, :label => t('Part#') %>
      <%= f.input :spec, :label => t('Spec'), :input_html => {:rows => 3} %>
      <%= f.input :unit, :label => t('Unit'), :collection => @qty_unit, :include_blank => true %>
      <%= f.input :category_id, :label => t('Part Category'), :collection => TwoTierDefinitionx::Definition.where('active = ? AND for_which = ?', true, 'material_category').order('ranking_index'), :include_blank => true %>
      <%= f.input :sub_category_id, :label => t('Part Sub Category'), :collection => TwoTierDefinitionx::SubDefinition.where(active: true).order('ranking_index'), :include_blank => true %>
      <%= f.input :preferred_supplier, :label => t('Preferred Supplier'), :input_html => {:rows => 2} %>
      <%= f.input :preferred_mfr, :label => t('Preferred Mfr') , :input_html => {:rows => 2} %>
      
      <%= link_to t('Back'), SUBURI + "/authentify/view_handler?index=0", :class => BUTTONS_CLS['action'] %>
      <%= f.button :submit, t('Save'), :class => BUTTONS_CLS['action'] %>  
<% end %>

Answer 1

这只是 css 后面的操作，您需要转到 css 并使用 float 或 align 或 margin 将这些表单元素定位在您希望的位置

HTML 行与 simple_form 2.1.2 和 Bootstrap 3/Rails 3.2 未对齐

HTML rows mis-aligned with simple_form 2.1.2 and Bootstrap 3/Rails 3.2

html

ruby-on-rails-3

simple-form

twitter-bootstrap

simple-form-for