如何在 rails 设计表格上风格化 Ruby

Question

这是我使用 devise 的注册表单，但出于某种原因，我的 CSS 只影响 First_Name 部分，没有其他任何影响。最重要的是，名字部分的边框颜色看起来与其他栏略有不同。我确实安装了 bootstrap，但我在其他页面上没有遇到过这样的问题，所以我认为这不是问题所在。

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  <div class="field input">
    <%=f.label :First_Name%>
    <%=f.text_field :fname, class:"form-control",:autofocus => true %>
  </div>

  <div class="field input">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field input">
    <%= f.label :password %>
    <% if @minimum_password_length %>
      <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field input">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>

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

<style>
.input{
  width: 25%;
  text-decoration: none;
}
</style>

Answer 1

您必须将 .form-control class 应用于输入字段以应用 Bootstrap 样式。

在您的代码中只有名字 (fname) .form-control - 您还必须将其添加到其他输入字段。

电子邮件字段示例：

<%= f.email_field :email, autofocus: true, autocomplete: "email", class:"form-control" %>

如何在 rails 设计表格上风格化 Ruby

How to stylize Ruby on rails devise forms

css

ruby

ruby-on-rails

devise