Question

我在轨道项目中使用Zurb Foundation。我正在尝试使用表格，文本字段和几个按钮来布局一个简单的页面。

我的内容左侧有一个巨大的间隙，将桌子的右侧推离屏幕并需要水平滚动才能看到内容。代码非常简单。我多次创建一个十二列的行。

e.g。

<div class="row">
  <div class="twelve columns">
    <h1>Customers</h1>
  </div>
</div>

您可以在此处查看问题的屏幕截图。正如您所看到的，桌子左侧有很多空白区域迫使桌子越过右边缘：https://www.dropbox.com/s/jd25l5epdn7ean5/Screenshot%202013-11-04%2011.29.31.png

我确定我在这里犯了一个简单的错误，但我找不到它。这是我第一次使用Foundation - 我通常使用Bootstrap但是我想在这个项目上尝试新的东西。

更新

完整的HTML：

   <div class="row">
  <div class="twelve columns">
    <h1>Customers</h1>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <%= form_tag customers_path, :method => 'get' do %>
      <p>
        <%= text_field_tag :search, params[:search], :placeholder => "Enter last name..." %>
        <%= submit_tag "Search", :name => nil, :class => 'button small' %>
      </p>
    <% end %>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>License #</th>
          <th>Date of birth</th>
          <th>Emergency Contact Name</th>
          <th>Emergency Contact #</th>
          <th>Address</th>
          <th>City</th>
          <th>Registration Date</th>
          <th>Parent/Guardian?</th>
          <th>Guardian Tel Number</th>
          <th>Guardian License #</th>
          <th>Participant Signature</th>
          <th>Guardian Signature</th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <% @customers.each do |customer| %>
          <tr>
            <td><%= customer.firstName %></td>
            <td><%= customer.last_name %></td>
            <td><%= customer.licenseNum %></td>
            <td><%= customer.dob %></td>
            <td><%= customer.contactName %></td>
            <td><%= customer.contactNum %></td>
            <td><%= customer.address %></td>
            <td><%= customer.city %></td>
            <td><%= customer.currentDate %></td>
            <td><%= customer.guardian %></td>
            <td><%= customer.guardianNum %></td>
            <td><%= customer.guardianLicenseNum %></td>
            <td><%= customer.participant_image_name %></td>
            <td><%- customer.guardian_image_name %></td>
            <td><%= link_to 'View', customer, :class => 'button secondary' %></td>
            <td><%= link_to 'Edit', edit_customer_path(customer), :class => 'button secondary' %></td>
            <td><%= link_to 'Delete', customer, method: :delete, data: { confirm: 'Are you sure you want to delete this customer? This cannot be undone.' }, :class => 'button alert' %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>

<div class="row">
  <div class="twelve columns">
    <%= will_paginate @customers %>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <%= link_to 'New Customer', new_customer_path, class: "button success"%>
  </div>
</div>

Answer 1

您使用的是什么版本的Foundation？在Foundation 4中，标记应为：

<div class="row">
  <div class="large-twelve small-twelve columns">
    <h1>Customers</h1>
  </div>
</div>

Zurb基金会在内容的左边留下了很大的差距

1 个答案: