2

我一直在学习并使用 Hartl 的Rails 教程中的元素来获得自己的应用程序和学习经验。在本教程中，为了关注用户，默认选项是单击 Railsform_for助手旁边的 Bootstrap-Sass 按钮，如下所示：

<%= form_for(current_user.relationships.build(followed_id: @user.id)) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>

但是，我想将输入修改为自定义按钮，并将类从 更改btn btn-large btn-primary为.follow-button.

我的CSSfollow-button如下。正如评论中所指出的，我在修改透明度、字体大小和颜色等基本元素时遇到了麻烦（字体似乎默认为基本的 Bootstrap 字体），而其他元素（例如悬停方面）确实起作用。如何覆盖表单的一些默认引导设置，以便我的所有自定义元素都出来？谢谢！

.follow-button{
     background: transparent;
     border: 1px solid #e8e8e8;
     display: block;
     float: right;
      &:hover { 
      background: #0089d1;
    }
      a {
      color: #006faa;
      font-weight: 400;
      font-size: 1.4em; //font size does not change
      display: block;
      padding: 0px 4px 0px 4px; //modification doesn't show..
      text-decoration: none;
      &:hover { 
      color: rgb(229, 246, 255);
      }
    }
  }

编辑：

使用更新的 CSS 代码：

.follow-button{
     background: transparent;
     border: 1px solid #e8e8e8;
     display: block;
     float: right;
      &:hover { 
      background: #0089d1;
    }
    input[type='submit'] {
      color: #006faa;
      font-weight: 400;
      font-size: 1.4em; //font size does not change
      display: block;
      padding: 0px 4px 0px 4px; //modification doesn't show..
      text-decoration: none;
      &:hover { 
      color: rgb(229, 246, 255);
      }
    }
  }

Rails 提交表单： 

<%= form_for(current_user.relationships.build(followed_id: @course.id)) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "follow-button" %>
<% end %>
4

1 回答 1

6

您正在为.follow-button包含链接 ( a) 的 a 设置样式。但f.submit会创建提交的输入类型。由于现在有“a”，它永远不会匹配您的样式选择器。

<%= f.submit "Follow", class: "follow-button" %>

进而

.follow-button{
     background: transparent;
     border: 1px solid #e8e8e8;
     display: block;
     float: right;
      background: #0089d1;
      color: #006faa;
      font-weight: 400;
      font-size: 1.4em; //font size does not change
      display: block;
      padding: 0px 4px 0px 4px; //modification doesn't show..
      text-decoration: none;
      &:hover { 
        color: rgb(229, 246, 255);
        background: #0089d1;
      }
  }
于 2013-02-15T22:10:30.013 回答