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来使您的选择器更具体。

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

1 个答案: