我正在使用rails-bootstrap-forms gem和twitter-bootstrap-rails。当我使用bootstrap_form_for函数时,我得到的部分样式只是部分样式:
<%= bootstrap_form_for([@investor.property, @investor], layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10", role: "form") do |f| %>
<% if @investor.errors.any? %>
<div id="error_explanation">
<h4><%= pluralize(@investor.errors.count, "error") %> prohibited this investor from being saved:</h4>
<ul>
<% @investor.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= f.text_field :name, label: "Name", placeholder: 'Your name here' %>
<%= f.email_field :email, label: "Email", placeholder: 'you@example.com' %>
<%= f.number_field :equity_share, label: "Equity share", placeholder: '% of total equity' %>
<%= f.number_field :priority, label: "Priority", placeholder: 'Payment priority' %>
<%= f.form_group do %>
<%= f.submit "Submit" %>
<% end %>
<% end %>
生成:
您可以看到应用水平布局但不会正确格式化标签。生成的HTML看起来不错:
<form accept-charset="UTF-8" action="/things/1/investors" class="form-horizontal" id="new_investor" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="QGzNsTGG41FPfnQ6n9yrka7caZayIu4fLpqToX5ASng=" /></div>
<div class="form-group"><label class="control-label col-sm-2" for="investor_name">Name</label><div class="col-sm-10"><input class="form-control" id="investor_name" name="investor[name]" placeholder="Your name here" type="text" /></div></div>
<div class="form-group"><label class="control-label col-sm-2" for="investor_email">Email</label><div class="col-sm-10"><input class="form-control" id="investor_email" name="investor[email]" placeholder="you@example.com" type="email" /></div></div>
<div class="form-group"><label class="control-label col-sm-2" for="investor_equity_share">Equity share</label><div class="col-sm-10"><input class="form-control" id="investor_equity_share" name="investor[equity_share]" placeholder="% of total equity" type="number" /></div></div>
<div class="form-group"><label class="control-label col-sm-2" for="investor_priority">Priority</label><div class="col-sm-10"><input class="form-control" id="investor_priority" name="investor[priority]" placeholder="Payment priority" type="number" /></div></div>
<div class="form-group"><label class="control-label col-sm-2"></label><div class="col-sm-10">
<input class="btn btn-default" name="commit" type="submit" value="Submit" />
</div></div></form>
我(根据我的知识)没有覆盖任何Bootstrap CSS或其他格式。如果这是一个有用的线索,“icon:”命令也根本不会改变输出。可能是什么问题?提前谢谢。
更新:根据Brad Werth的建议,我试图用bootstrap-sass替换twitter-bootstrap-rails。但是,每当我包含@import“bootstrap”时,我在application.css.scss中都会出现“unclosed block”错误;线。这是application.css.scss的内容:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*= require rails_bootstrap_forms
*= require jquery.ui.datepicker
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";
“custom”只是我网站的基本CSS。如果@import“bootstrap”我只会收到一个错误;无论其他行还是require语句,都包含该行。
答案 0 :(得分:0)
如果可能,我会dump twitter-bootstrap-rails,并使用https://github.com/twbs/bootstrap-sass上的正式版。
答案 1 :(得分:0)
如果您更喜欢rails-bootstrap-forms附带的CSS,您可以在twitter-bootstrap-rails gem中导入单个工作表并跳过forms.less。您也可以使用Teststrap应用程序进行测试:http://teststrap.herokuapp.com。
https://github.com/seyhunak/twitter-bootstrap-rails#using-stylesheets-with-less
编辑:我继续在teststrap中安装了两个gem,但无法复制此问题。我怀疑还有其他事情发生了,如果你想让我看一下你的项目来解决它,请给我发消息。
答案 2 :(得分:0)
当我升级到Ruby 2.1.1时,这个问题终于解决了。