rails-bootstrap-forms适用于某些样式但不适用于其他样式

时间:2014-08-24 02:51:41

标签: css ruby-on-rails twitter-bootstrap twitter-bootstrap-rails

我正在使用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 %>

生成:

enter image description here

您可以看到应用水平布局但不会正确格式化标签。生成的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="&#x2713;" /><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语句,都包含该行。

3 个答案:

答案 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时,这个问题终于解决了。