Question

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

更新：我大致以列为中心（看一下链接），但我想将它们与Contacts标题相关联。这可能吗？

修改：加分：每个联系人都有指向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确实有一些你可以使用的mixin，其中一个是centered block。你可以像这样使用它（一旦你有了boostrap-sass并且正在运行）

@import "bootstrap";

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

如何使用bootstrap-sass相对于屏幕大小

1 个答案: