![](/img/trans.png)
[英]Simple_form form-horizontal still doesn't work in bootstrap 3
[英]Simple_form class form-horizontal with bootstrap 3 not working in rails 4
我有兩個rails應用程序,'form-horizontal'在一個工作,但不是另一個,我不知道為什么。
第一個應用程序稱為“水平”(我的測試應用程序),另一個是“庫存”
在“橫向”應用程序中的表單:
<%= simple_form_for(@part, html: {class: 'form-horizontal' }) do |f| %>
<div class="field">
<%= f.input :name %>
</div>
<div class="field">
<%= f.input :number %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
並在瀏覽器中看起來像這樣:
並且“庫存”應用程序的表單是:
<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<div class="field">
<%= f.input :part_number %>
</div>
<div class="field">
<%= f.input :on_order_qty %>
<%= f.input :revision %>
<%= f.input :current_rev %>
<%= f.input :name, required: false%><br>
</div>
<%= f.simple_fields_for :parts do |part| %>
<%= render 'part_fields', :f => part %>
<% end %>
<div class="links">
<%= link_to_add_association 'Add additional supplier', f, :parts %><br><br>
</div>
<div class="fields">
<%= f.input :stock_qty %>
<%= f.input :ncmr_qty %>
</div>
<div class="form-actions">
<%= f.submit %>
</div>
<% end %>
但它在瀏覽器中看起來像這樣:
為什么表單水平類不能在“庫存”應用程序中工作?
似乎整數輸入字段是水平渲染的,但在文本輸入字段中發生了一些奇怪的事情。 以下是“Inventory”應用程序的瀏覽器源html:
<form accept-charset="UTF-8" action="/items" class="simple_form form-horizontal"
id="new_item" method="post"><div style="margin:0;padding:0;display:inline"><input
name="utf8" type="hidden" value="✓" /><input name="authenticity_token"
type="hidden" value="H3DKGhGdtfv1e8F1rg9TgDJUyaBspXOSFMpm2gnjwzk=" /></div>
<div class="field">
<div class="input string required item_part_number"><label class="string required"
for="item_part_number"><abbr title="required">*</abbr> Part number</label><input aria
required="true" class="string required" id="item_part_number" maxlength="255"
name="item[part_number]" required="required" size="255" type="text" /></div>
</div>
<div class="field">
<div class="input integer optional item_on_order_qty"><label class="integer optional"
for="item_on_order_qty">On order qty</label><input class="numeric integer optional"
id="item_on_order_qty" name="item[on_order_qty]" step="1" type="number" /></div>
<div class="input string optional item_revision"><label class="string optional"
for="item_revision">Revision</label><input class="string optional" id="item_revision"
maxlength="255" name="item[revision]" size="255" type="text" /></div>
<div class="input boolean optional item_current_rev"><input name="item[current_rev]"
type="hidden" value="0" /><input class="boolean optional" id="item_current_rev"
name="item[current_rev]" type="checkbox" value="1" /><label class="boolean optional"
for="item_current_rev">Current rev</label></div>
<div class="input string optional item_name"><label class="string optional"
for="item_name">Name</label><input class="string optional" id="item_name" maxlength="255"
name="item[name]" size="255" type="text" /></div><br>
</div>
( I took out the html for the nested fields and some other fields for brevity)
<div class="form-actions">
<input name="commit" type="submit" value="Create Item" />
</div>
</form>
我已經在Chrome和Firefox中進行了測試。 我已經檢查過bootstrap-sass gem和simple_form gem是相同的版本。 我沒有花哨的自定義css或javascript,只有@ @import 'bootstrap';
兩個應用程序中的bootstrap_custom.css.scss
文件中的行。 我不知道為什么文本輸入字段覆蓋了“庫存”應用程序中屏幕的整個寬度,但是整數字段看起來很好並且水平渲染。 這有什么不對?
我遇到了類似的問題,發現了一個非常快速的解決方法http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form
簡單的修復是(在執行正常的簡單形式bootstrap init stuff之后 - 見下文),將以下代碼添加到初始化程序(如config / initializers / simple_form_bootstrap.rb)
inputs = %w[
CollectionSelectInput
DateTimeInput
FileInput
GroupedCollectionSelectInput
NumericInput
PasswordInput
RangeInput
StringInput
TextInput
]
inputs.each do |input_type|
superclass = "SimpleForm::Inputs::#{input_type}".constantize
new_class = Class.new(superclass) do
def input_html_classes
super.push('form-control')
end
end
Object.const_set(input_type, new_class)
end
而且你要參加比賽了。
“普通的簡單形式bootstrap init stuff”類似於:
rails generate simple_form:install --bootstrap
如果您想要水平表單,請將其添加到simple_form配置中
config.form_class = "simple_form form-horizontal"
CAVEAT:基於最近的一些評論,看起來很多這些評論都不適用於更新版本的simple_form
。 我前一段時間寫了這篇文章,使用這段代碼的項目(對我而言)不再使用simple_form
因此很難找到確切的版本號。 我相信這將適用於2.x.的測試。 一旦你到達v3,你可能會遇到問題,必須找到不同的解決方案。
簡單形式3.1.0.rc1已經發布!! 這支持bootstrap 3.只需將您的gem更新到最新版本,這將解決您的問題。 您可以通過更改日志檢查其他增強功能https://github.com/plataformatec/simple_form/blob/v3.1.0.rc1/CHANGELOG.md
只需將simple_form
更新為
gem 'simple_form', '3.1.0.rc2'
然后重新運行
$ rails generate simple_form:install --bootstrap
我嘗試了很多不同的解決方案但是,在我為每個表單輸入添加了wrapper: :horizontal_form
行之前沒有任何幫助。 而且,我有最新的simple_form版本:3.2.1
例如:
= f.input :payment_term, wrapper: :horizontal_form
要在每個表單的基礎上覆蓋,請更改:
<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>
至
<%= simple_form_for(@item, wrapper: :horizontal_form) do |f| %>
要將所有表單更改為水平,請更改初始化程序:
config/initializers/simple_form_bootstrap.rb
行:
config.default_wrapper = :vertical_form
至
config.default_wrapper = :horizontal_form
(記得在更改初始化程序后重新啟動rails服務器)
改變個人意見,改變:
<%= f.input :on_order_qty %>
至
<%= f.input :on_order_qty, wrapper: :horizontal_form %>
使用簡單形式RC1。 有一個完整的示例項目: https : //github.com/rafaelfranca/simple_form-bootstrap 。 我剛剛復制了bootstrap初始化程序,並在https://github.com/rafaelfranca/simple_form-bootstrap/tree/master/app/views/examples上關注了horirozontal視圖示例。
如果以上所有都不起作用,請嘗試使用gem
gem'simple_form_bootstrap3'
需要用horizontal_form_for替換form_for
請查看非常有用的示例應用程序,以便在Rails 4應用程序中使用Simple Form和Bootstrap工具包:
http://simple-form-bootstrap.plataformatec.com.br/
不要忘記文檔頁面 。
我的整個頁面的輸入字段的全長都有問題。 這是我做的,我希望它可以幫助別人。
使用simple_form 3.4.0
打開config / initializers / simple_form_bootstrap.rb在頁面底部我更改了以下內容:From
config.default_wrapper = :vertical_form
config.wrapper_mappings = {
check_boxes: :vertical_radio_and_checkboxes,
radio_buttons: :vertical_radio_and_checkboxes,
file: :vertical_file_input,
boolean: :vertical_boolean,
datetime: :multi_select,
date: :multi_select,
time: :multi_select
}
end
至:
config.default_wrapper = :horizontal_form
config.wrapper_mappings = {
check_boxes: :horizontal_radio_and_checkboxes,
radio_buttons: :horizontal_radio_and_checkboxes,
file: :horizontal_file_input,
boolean: :horizontal_boolean,
datetime: :multi_select,
date: :multi_select,
time: :multi_select
}
end
然后重新啟動您的應用以重新初始化。
當我在我的代碼中使用form-horizontal時,我還使用bootstrap類修改了不同的輸入。 例如,使用bootstrap 3:
<div class="form-group">
<%= f.label :name, class: "control-label col-sm-3" %>
<div class="col-sm-4"><%= f.text_field :name, placeholder: "Your placeholder", class: "form-control" %></div>
</div>
現在,如果您想要應用程序的整個寬度,可以將col-sm調整為col-sm-12。 我認為以這種方式定制更容易。 (col-sm用於bootstrap 3,如果你需要舊版本,我認為你必須使用舊版本)
有關bootsrap的更多信息,請訪問: doc
以下是帶有bootstrap 2和簡單形式的代碼示例: doc
使用bootsrap 2的輸出形式應如下所示:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<input type="text" id="Name" placeholder="Name">
</div>
</div>
</form>
我認為你需要設置一個控制組類div和一個控件類div。
這是舊語法的doc形式: doc
希望能幫助到你
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.