Question

我一直在学习并使用Hartl Rails tutorial的元素来获取自己的应用和学习经验。在本教程中，为了跟踪用户，默认选项一直单击Rails的form_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。

follow-button我的CSS如下。如评论中所述，我无法修改透明度，字体大小和颜色等基本元素（字体似乎默认为基本的Bootstrap字体），而其他元素（如悬停方面）则起作用。如何覆盖表单的某些默认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 %>

Answer 1

您正在为包含链接（.follow-button）的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;
      }
  }

修改Bootstrap表单的提交按钮到自定义css

1 个答案: