【问题标题】:Bootstrap grid offset not centering引导网格偏移不居中
【发布时间】:2019-08-11 18:48:38
【问题描述】:

试图使我的注册页面居中,但我的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>

我读过其他帖子,他们的答案只是他们忘记了容器标签或其他东西。在引导文档中也找不到任何答案。我假设这是我忽略的小东西。

【问题讨论】:

  • 引导程序的版本是什么(3 或 4)
  • 您的文字没有居中。但你的专栏是。工作正常..
  • @widjajayd v4.3.1

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


【解决方案1】:

只需将 col-md-offset-4 更改为 offset-md-4,因为 bootstrap 4 更改了这个

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

这里是reference for this

【讨论】:

  • 感谢您的帮助,但这也没有将其置于中心位置。我读过那篇文章,但似乎没有帮助
【解决方案2】:
<div class="row">
   <div class="col-md-4 text-center">

试试这个。这是我最常使用的。

【讨论】:

    【解决方案3】:

    不知道发生了什么。 我删除了一些代码之间的中断,它起作用了。 我把换行符放回去了,它仍然有效。我不知道。也许我的浏览器有问题?字面上不知道,但它现在正在工作

    【讨论】:

      【解决方案4】:

      您必须按如下方式更改此部分。

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

      只需更改这部分。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2020-04-15
        • 2018-01-10
        • 1970-01-01
        • 1970-01-01
        • 2017-04-21
        • 2017-08-30
        • 1970-01-01
        • 2020-01-31
        相关资源
        最近更新 更多