Question

尝试使注册页面居中，但我的class="col-md-4 col-md-offset-4"无法正常工作。我知道还有其他方法可以使文本居中，但是我只想知道我在代码中做错了什么，所以我知道以后可以避免它。

我的HTML是：

<div class="container">
 <div class="row">
  <div class="col-md-4 col-md-offset-4">
   <div class="well">
            <h2>Sign up</h2>

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

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

      <div class="field">
        <%= 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">
        <%= f.label :password_confirmation %><br />
        <%= f.password_field :password_confirmation, autocomplete: "off" %>
      </div>

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

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

我读过其他文章，他们的回答仅仅是他们忘记了容器标签之类的东西。在引导文档中也找不到任何答案。我假设这是我忽略的小东西。

Answer 1

由于引导程序4对此进行了更改，只需将col-md-offset-4更改为offset-md-4

<div class="row">
  <div class="col-md-4 offset-md-4">

这是reference for this

Answer 2

<div class="row">
   <div class="col-md-4 text-center">

尝试一下。那是我大多数时候使用的。

Answer 3

不知道发生了什么。我删除了一些代码之间的中断，并且它起作用了。我把断线放回去，它仍然有效。我不知道。也许我的浏览器有问题？完全不知道，但是现在可以正常工作

Answer 4

您必须将此部分更改为波纹管。

<div class="row">
  <div class="col-md-4 offset-md-4">

只需更改此部分。

引导网格偏移未居中

4 个答案: