我正在使用pure.css在我的rails应用程序中加载“_form.html.erb”。
然而,css没有为rails部分设置样式,而是为我下面的常规HTML设置样式。 注意:我在下方添加了HTML,以确保css正常运行。
以下是_forms.html.erb文件的示例
<%=f orm_for(@client) do |f| %>
<% if @client.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@client.errors.count, "error") %> prohibited this client from being saved:</h2>
<ul>
<% @client.errors.full_messages.each do |message| %>
<li>
<%=m essage %>
</li>
<% end %>
</ul>
</div>
<% end %>
<!-- beginning of rails code -->
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<%=f .label:firstName %>
<br>
<%=f .text_field :firstName %>
</div>
</div>
</fieldset>
</form>
<div class="actions">
<%=f .submit class: "btn btn-primary" %>
</div>
<% end %>
<!-- end of rails code -->
<!-- Begining of HTML code -->
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label for="first-name">First Name</label>
<input id="first-name" class="pure-u-23-24" type="text">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="last-name">Last Name</label>
<input id="last-name" class="pure-u-23-24" type="text">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="email">E-Mail</label>
<input id="email" class="pure-u-23-24" type="email" required>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="city">City</label>
<input id="city" class="pure-u-23-24" type="text">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="state">State</label>
<select id="state" class="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label for="terms" class="pure-checkbox">
<input id="terms" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
这是application.scss文件
*= require_tree .
*= require_self
*= require datatables.net-bs/css/dataTables.bootstrap.min
*= require css/pure-min.css
*= require css/grids-responsive-min.css
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "AdminLTE/AdminLTE";
@import "AdminLTE/skins/skin-blue";
我有 assets / components / css
中需要的“grids-responsive-min.css”和“pure-min.css”我认为它可能是一个rails语法问题,但我不确定。我确信这很简单,我很遗憾。
答案 0 :(得分:1)
您可以使用以下方法将CSS类应用于form_for
方法:
<%= form_for(@client, html: { class: 'pure-form pure-form-stacked' }) do |f| %>
答案 1 :(得分:0)
尝试改变:
<%=form_for(@client) do |f| %>
为:
<%=bootstrap_form_for(@client) do |f| %>