如何将相对于屏幕尺寸 bootstrap-sass 的所有列居中

Question

整个 Rails 应用程序可以在 GitHub 上查看并且该应用已托管 on heroku

更新：我已经大致将列居中（查看 link），但我想将它们相对于 Contacts 标题居中。这可能吗？

编辑：加分：每个联系人都有 link 到 Show Edit 和 Destroy。这些目前有点模糊在一起，就像 ShowEditDestroy，我很想知道如何在它们之间放置一些填充物，这样它们看起来就不会那么模糊。

我正在尝试使所有列在我的视图中居中。我以前使用 zurb-foundation 完成过此操作，但我在使用 bootstrap-sass 时遇到了问题。这是我使用 zurb-foundation 构建的先前站点的示例，我试图使用 bootstrap-sass 来模仿它：my portfolio

我只希望我视图中的所有内容在 botstrap 的列中整齐地组织起来，但相对于页面中间保持居中，同时始终保持文本居中。

这是我当前的 index.html.erb 视图：

<div id="main-container" class="container" style="text-align: left">
  <div class="row">
        <p id="notice"><%= notice %></p>

        <h1 class="text-center">Listing Contacts</h1>

        <table>
          <thead>
            <tr>
              <div id="content" class="col-xs-3">
              <th>First name</th>
              </div>
                <div id="content" class="col-xs-4">
              <th>Last name</th>
                </div>
                  <div id="content" class="col-xs-5">
              <th>Email address</th>
                  </div>
                    <div id="content" class="col-xs-6">
              <th>Company Name</th>
                    </div>
                      <div id="content" class="col-xs-7">
              <th>Phone Number</th>
                      </div>
                        <div id="content" class="col-xs-8">
              <th colspan="3"></th>
                        </div>
            </tr>
          </thead>

          <tbody>
            <% @contacts.each do |contact| %>
              <tr>
                <td><%= contact.first_name %></td>
                <td><%= contact.last_name %></td>
                <td><%= contact.email_address %></td>
                <td><%= contact.company_name %></td>
                <td><%= contact.phone_number %></td>
                <td><%= link_to 'Show', contact %></td>
                <td><%= link_to 'Edit', edit_contact_path(contact) %></td>
                <td><%= link_to 'Destroy', contact, method: :delete, data: { confirm: 'Are you sure?' } %></td>
              </tr>
            <% end %>
          </tbody>
        </table>

        <br>

        <%= link_to 'New Contact', new_contact_path %>

        <h2>Import Contacts</h2>

        <%= form_tag import_contacts_path, multipart: true do %>
            <%= file_field_tag :file %>
            <%= submit_tag "Import" %>
        <% end %>
        </div>
    </div>
</div>

如您所见，我只是通过关注 railscast 396 建立了一个在线联系人列表。我只想让所有内容都变得朴素。

Answer 1

Bootstrap-sass 确实有一些您可以使用的 mixins，其中之一是 centered block。你可以像这样使用它（一旦你有 boostrap-sass up 和运行）

@import "bootstrap";

.centered {
  @include center-block();
}

如何将相对于屏幕尺寸 bootstrap-sass 的所有列居中

how to center all columns with bootstrap-sass relative to screen size

ruby-on-rails

twitter-bootstrap

bootstrap-sass

ruby-on-rails-4