设计验证样式的麻烦

时间:2017-03-03 18:32:32

标签: ruby-on-rails twitter-bootstrap devise

我在基本的Ruby on Rails应用程序上使用Devise gem作为用户登录页面和用户注册页面。 我希望在出现错误时摆脱丑陋的默认样式。我能够用一些引导样式替换错误框,但我无法找到有关如何找到的任何答案摆脱我输入和输入标签周围出现的丑陋红色框。 此外,验证发生时输入正在缩小。它们以100%宽度开始。然后,如果出现错误,它们会缩小。这是两个问题的图像。输入框应该与上面的.danger div一样宽:

enter image description here

以下是此页面的代码:

<div class="row">
<div class="top col-md-4 col-md-push-4 col-sm-6 col-sm-push-3 col-xs-10 col-xs-push-1">
<div class="logo_container">
  <%= image_tag "musilogopurple.png", class: 'logo_big' %> 
</div>
<p class="text-center">Forget your password? Enter your email below and we will send you reset instructions.</p>
<br />

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
  <%= devise_error_messages! %>

  <div class="form-group">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, class: 'form-control' %>
  </div>

  <div class="actions">
    <br />
    <%= f.submit "Send", class: 'btn btn-purple'%>
  </div>
<% end %>

<%= render "devise/shared/links" %>
</div>
</div>

我非常感谢一些指导。谢谢!

1 个答案:

答案 0 :(得分:1)

你有什么脚手架吗?如果您不使用它,脚手架会引入CSS文件尝试删除它们。此外,如果您发布了正在接收样式的CSS文件,它会有所帮助。