Question

查看本网站上的各种文章和答案，其中一个流行的答案似乎是使用<div class="text-center">，但它对我不起作用。按钮从屏幕的最左侧开始。任何想法都可以做到 - 保持在引导程序中，理想情况下，而不是必须在我的样式表中添加新类。感谢。

我现在的代码是：

                <div class="text-center">
                  <%= image_tag 'logo_for_web.png'  %>
  <h3>Header here</h3>

  <h4>
                    Text here
  </h4>

    <h4>
                    Text here
  </h4>

    <%= link_to "Sign up", '#', class: "btn btn-primary col-xs-11" %>

    <%= link_to "Log in with Facebook", '#', class: "btn btn-primary col-xs-11" %>
    <%= link_to "Log in with email", '#', class: "btn btn-primary col-xs-11" %>
    <%= link_to "Use without signing up", '#', class: "btn btn-primary col-xs-11" %>
    <%= link_to "About Us", { controller: "static_pages", action: "about"}, class: "btn btn-primary col-xs-11" %>
    <%= link_to "Contact Us", '#', class: "btn btn-primary col-xs-11" %>


</div>

Answer 1

您应该使用网格，并将它们对齐。 Bootstrap总共有12个网格列。所以;

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <!-- Your Buttons Here -->
    </div>
</div>

Answer 2

我最终使用的是（我的应用程序主要用于移动设备）：

<div class="container">
    <div class="row">
      <div class="col-xs-10 col-xs-offset-1 ">
        <%= link_to "Log in with Facebook", '#', class: "btn btn-primary btn-lg btn-block" %>
        <%= link_to "Log in with email", '#', class: "btn btn-primary btn-lg btn-block" %>
        <%= link_to "Sign Up", '#', class: "btn btn-primary btn-lg btn-block" %>
        <%= link_to "Use without signing up", '#', class: "btn btn-primary btn-lg btn-block" %>
        <%= link_to "About Us", { controller: "static_pages", action: "about"}, class: "btn btn-primary btn-lg btn-block" %>
        <%= link_to "Contact Us", '#', class: "btn btn-primary btn-lg btn-block" %>
      </div>
  </div>
</div>

试图用引导程序3定位我的按钮中心屏幕

2 个答案: