我想在 rails 项目中集中设计一个简单形式 div class="col-md-6 col-md-offset-3"

Question

我尝试在我的设备周围放置一个 div 块 class="col-md-6 col-md-offset-3"，预计这会占据我屏幕宽度的 1/3 并且会集中（抵消）。它没有用。为什么？

<div class="col-md-6 col-md-offset-3">
  <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= f.error_notification %>

    <div class="form-inputs">
      <%= f.input :email,
                  required: true,
                  autofocus: true ,
                  input_html: { autocomplete: "email" }%>
      <%= f.input :password,
                  required: true,
                  hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
                  input_html: { autocomplete: "new-password" } %>
      <%= f.input :password_confirmation,
                  required: true,
                  input_html: { autocomplete: "new-password" } %>
    </div>

    <div class="form-actions">
      <%= f.button :submit, "Sign up" %>
    </div>
  <% end %>
 </div>

Answer 1

class 是 offset-md-3 不是 col-md-offset-3

<div class="row">
  <div class="col-md-6 offset-md-3">
    ...
  </div>
</div>

我想在 rails 项目中集中设计一个简单形式 div class="col-md-6 col-md-offset-3"

I want to centralize a devise simple-form in a rails project with div class="col-md-6 col-md-offset-3"

ruby-on-rails

grid

bootstrap-grid