Ruby on rails Rails简单表单针对不同的表单使用不同的样式

Ruby on rails Rails简单表单针对不同的表单使用不同的样式,ruby-on-rails,twitter-bootstrap,simple-form,Ruby On Rails,Twitter Bootstrap,Simple Form,我在Rails3.1项目中与twitter引导一起使用了简单的表单gem。我有几个窗体视图,它们看起来都很好。但现在我喜欢在其中一种表单中设置文本输入字段的样式,这样它就变得更小了。文本输入字段位于我的一个名为“角色”的控制器的编辑表单视图中。该表单的部分内容如下所示: = simple_form_for @role, :html => { :class => 'form-horizontal' } do |f| = f.error_notification = f.inp

我在Rails3.1项目中与twitter引导一起使用了简单的表单gem。我有几个窗体视图,它们看起来都很好。但现在我喜欢在其中一种表单中设置文本输入字段的样式,这样它就变得更小了。文本输入字段位于我的一个名为“角色”的控制器的编辑表单视图中。该表单的部分内容如下所示:

= simple_form_for @role, :html => { :class => 'form-horizontal' } do |f| 
  = f.error_notification
  = f.input :name
  = f.input :description
  .form-actions
    = f.button :submit, :class => 'btn-primary'
    = link_to t('.cancel', :default => t("helpers.links.cancel")), roles_path, :class => 'btn'
下面有一个样式文件:


app/assets/stylesheets/roles.css.scss


它是使用scaffold命令创建的。我试图在这里添加一些样式,但这导致我的应用程序的每一种形式都发生了变化。是否有一种好方法可以仅为一个具有简单表单的特殊表单视图更改文本输入字段的样式?如果我希望输入文本字段的大小为:宽度100px到高度50px,我应该将样式放在哪里?样式看起来会是什么样子

您需要知道,即使您有一个专门用于角色的CSS文件。最后,每个CSS文件都捆绑在一起并提供服务。这意味着,roles.css将加载到每个页面上,从而产生您描述的行为

如果要设置单个表单的样式,可以通过添加类来实现:

= simple_form_for @role, :html => { :class => 'form-horizontal roles-form' } do |f| 

现在,您可以将CSS定义的范围扩展到
。角色表单
,它们只适用于这个表单。

听起来不错。我按照你的建议添加了该类,并尝试在之后更改该类的样式。但是没有成功。我在角色css文件中包含了以下样式。角色组成{font-family:Arial,无衬线;颜色:#FFFFFF;字体大小:12px;边框:无;背景色:#BF0000;高度:22px;宽度:250px;填充:3px;}这将是一个很大的变化,但不会发生任何变化。您可能需要将样式应用于
输入
标记,不是完整的表格。尝试使用以下CSS选择器:
。角色表单输入{…}