Question

我的注册表单看起来不像书中。它好大。我无法解决它，因为我不知道CSS非常好。 http://hkar.ru/BOAk 我该如何解决这个问题？提交new.htm.erb

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
  <div class="span6 offset3">
    <%= form_for(@user) do |f| %>
      <%= render 'shared/error_messages' %>
      <%= f.label :name %>
      <%= f.text_field :name %>
      <%= f.label :email %>
      <%= f.text_field :email %>
      <%= f.label :password %>
      <%= f.password_field :password %>
      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>
      <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
    <% end %>
  </div>
</div>

文件custom.css.scss

@import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
$grayLight: #999;
$grayLighter: #eee;
$grayDarker: #222;
@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.
.
.
.
.
.
.
/* forms */
input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}
input {
  height: auto !important;
}
#error_explanation {
  color: #f00;
  ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
}
.field_with_errors {
  @extend .control-group;
  @extend .error;
}

感谢您试图帮助我）

Answer 1

不知道您希望表单看起来如何，我只能为您提供近似解决方案：

form {
  width: 50%;
  margin: 0 auto;
}

通过这种方式，您可以将表单的宽度设置为可用空间的一半（它将“更小”），并将其放置在水平中心。

注册表单样式

1 个答案: