0

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

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

例如

<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>
4

1 回答 1

0

你用的是什么版本的Foundation？在 Foundation 4 中，标记应该是：

<div class="row">
  <div class="large-twelve small-twelve columns">
    <h1>Customers</h1>
  </div>
</div>
于 2013-11-04T18:42:52.240 回答