simple_form不應用引導程序
[英]simple_form not applying bootstrap
問題描述
我已經設置了一個simple_form聯系人頁面，但是引導似乎只應用於h3和“發送消息”按鈕，而不應用於表單本身。
這可能是什么原因？
<div class="container">
<h3>Shoot us a message</h3>
<%= simple_form_for @contact, :html => {:class => 'form-group' } do |f| %>
<%= f.input :name, :input_html => { :class => "span6" } %>
<%= f.input :email, :input_html => { :class => "span6" } %>
<%= f.input :message, :as => :text, :required => true %>
<div class= "hidden">
<%= f.input :nickname, :hint => 'Leave this field blank!' %>
</div>
<div>
</br>
<%= f.button :submit, 'Send message', :class=> "btn btn-primary" %>
</div>
<% end %>
</div>
一直在使用以下資源，但到目前為止沒有任何變化：
http://simple-form-bootstrap.plataformatec.com.br/articles/7/edit https://github.com/plataformatec/simple_form
HTML輸出：
<!DOCTYPE html>
<html>
<head>
<title>Streetheart</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/masonry/transitions.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/bootstrapcss.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/contacts.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/pages.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/profiles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/masonry/jquery.masonry.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/profiles.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="5cR8ezM88QtJ4ORslrnQQ0/b8p0tihvpVZqCU1/c3cI=" name="csrf-token" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="container">
<h3>Shoot us a message</h3>
<form accept-charset="UTF-8" action="/contacts" class="simple_form new_contact" id="new_contact" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="5cR8ezM88QtJ4ORslrnQQ0/b8p0tihvpVZqCU1/c3cI=" /></div>
<div class="control-group string required contact_name"><label class="string required control-label" for="contact_name"><abbr title="required">*</abbr> Name</label><div class="controls"><input class="string required" id="contact_name" name="contact[name]" type="text" /></div></div>
<div class="control-group email required contact_email"><label class="email required control-label" for="contact_email"><abbr title="required">*</abbr> Email</label><div class="controls"><input class="string email required" id="contact_email" name="contact[email]" type="email" /></div></div>
<div class="control-group text required contact_message"><label class="text required control-label" for="contact_message"><abbr title="required">*</abbr> Message</label><div class="controls"><textarea class="text required" id="contact_message" name="contact[message]">
</textarea></div></div>
<div class="control-group string optional contact_nickname"><label class="string optional control-label" for="contact_nickname">Nickname</label><div class="controls"><input class="string optional" id="contact_nickname" name="contact[nickname]" type="text" /><p class="help-block">Leave this field blank!</p></div></div>
</br>
<input class="btn btn btn-primary" name="commit" type="submit" value="Send message" />
</form></div>
</body>
</html>
1 個解決方案
解決方案1
0 2014-01-31 05:11:31
您是否嘗試過將HTML直接應用於表單元素？
<div class="container">
<h3>Shoot us a message</h3>
<%= simple_form_for @contact, :class => 'form-group' do |f| %>
<%= f.input :name, :class => "span6" %>
<%= f.input :email, :class => "span6" %>
<%= f.input :message, :as => :text, :required => true %>
<%= f.input :nickname, :class => "hidden", :hint => 'Leave this field blank!' %>
</br>
<%= f.button :submit, 'Send message', :class=> "btn btn-primary" %>
<% end %>
</div>
您擁有的方法適用於遠程表單構造，但是從這種情況看，您不需要這種情況下的遠程表單。
將simple_form與bootstrap 3集成
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.