【问题标题】:rails-bootstrap-forms applies some styles but not othersrails-bootstrap-forms 应用某些样式,但不应用其他样式
【发布时间】:2014-08-24 02:51:40
【问题描述】:

我正在使用 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="&#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 中收到“未关闭块”错误;线。这是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";

“自定义”只是我网站的基本 CSS。如果 @import "bootstrap"; 我只会收到错误消息;行被包括在内,不管其他行或要求语句。

【问题讨论】:

  • 我猜你的资产没有编译。
  • 听起来不错。 "rake assets:precompile" 不能修复它...还有其他方法吗?
  • 您是否使用某种生成器来创建 rails 模板?确认您已正确包含引导 css。
  • 我跑了“rails generate bootstrap:install less”
  • 最好把文件的样子贴出来让别人看。

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


【解决方案1】:

如果可能的话,我会dump twitter-bootstrap-rails,并在https://github.com/twbs/bootstrap-sass 使用官方版本。

【讨论】:

  • 尝试这个,我在 @import "bootstrap" 上得到一个 "unclosed block" 编译错误; application.css.scss 中的命令。看来这个 gem 也很难找到 Bootstrap!
  • 嗯……很奇怪。我以前从未见过那个。我想知道您的资产或供应商/资产目录中是否有任何残余或冲突元素,或者其他什么......它甚至可能是您的 application.css.scss 中引导程序之前的 hte 文件之一,尽管我想它非常接近到顶部...
  • 我同意这绝对看起来像一个冲突。我在供应商资产中几乎没有任何内容,并且(请参阅更新)导入语句位于 application.css.scss 的顶部。我真的很难过。
  • 是的,同上。我能给出的唯一建议是进行提交,然后开始从你的应用程序中删除一些东西,直到你找到魔法元素或删除整个 app_root 中的所有内容。我知道,不是很有帮助,但你显然得到了一些意想不到的影响。一个开始的地方可能是公共/资产,以防有什么东西偷偷溜进去......祝你好运,抱歉我没有灵丹妙药。
  • 作为 gem 的维护者之一,我想要更多的反馈。我们有一个很好的宝石,如果它符合他们的需求,人们应该使用它。
【解决方案2】:

如果您更喜欢 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,但无法复制此问题。我怀疑还有其他事情发生,如果您希望我查看您的项目以解决问题,请给我发送消息。

【讨论】:

    【解决方案3】:

    当我升级到 Ruby 2.1.1 后,这个问题终于自行解决了。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-09-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-25
      相关资源
      最近更新 更多