【发布时间】: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="✓" /><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