[英]html rows mis-aligned with simple_form 2.1.2 and bootstrap 3/Rails 3.2
這是一個通過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
上simple_form html.erb
對齊行的<%=f.input ..%>
,也可以將一行拖回內聯並將未對齊行減少1。
究竟是什么導致未對准? 有辦法解決嗎? 謝謝。
這是simplr_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 %>
這只是后面要做的CSS,您需要轉到CSS並使用float或align或margin將那些表單元素放置在您想要的位置
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.