Bootstrap CSS btn-block类不使用Rails进行提交按钮

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 %>

此代码使用bootstrap创建有效的提交按钮.但是,当我尝试将btn-block类添加到提交按钮时,它会与按钮样式混淆并且不会给按钮增加宽度:100%样式,就像上面使用相同类设置样式的链接一样.

Answer 1

在app/assets/stylesheets中创建一个名为style.css的新样式表

确保使用语法在application.css中明确要求使用此样式表 *= require_self

所以在新的样式表app/assets/stylesheets/style.css中

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

如果这不起作用,您需要通过向表单添加ID来使选择器更具体.