引导 CSS btn-block 类不使用 Rails for Submit 按钮

Question

我正在使用 bootstrap-sass gem 来设计我的 Rails 应用程序的样式，并且在让 btn-block 类与新用户注册表中的提交按钮一起使用时遇到问题。

以下是相关代码...

   <%= link_to "Sign in with Facebook", user_omniauth_authorize_path(:facebook), class: "btn btn-primary btn-large btn-block" %> 
   <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<%= f.email_field :email, placeholder: "Email" %>
    <% if f.object.password_required? %>
<%= f.password_field :password, placeholder: "Password" %>
<%= f.password_field :password_confirmation, placeholder: "Confirm Password" %>
<% end %>
<%= f.submit "Create Account", class: "btn btn-primary" %>
<% end %>

此代码使用引导程序创建有效的提交按钮。 但是，当我尝试将 btn-block 类添加到提交按钮时，它会弄乱按钮样式，并且不会像上面使用相同类样式的链接那样为按钮提供宽度：100% 样式。

Answer 1

在应用程序/资产/样式表中创建一个名为样式的新样式表.css

确保在应用程序中显式要求此样式表.css使用以下语法 *= require_self

所以在新的样式表应用程序/资产/样式表/样式中.css

.btn.btn-primary {
  width: 100%; 
}

如果这不起作用，则需要通过在表单中添加 ID 来使您的选择器更加具体。