Zurb Foundation оставляет большой пробел слева от контента

0

Я использую Zurb Foundation в проекте rails. Я пытаюсь развернуть простую страницу со столом, текстовым полем и несколькими кнопками.

Слева от моего контента есть огромный пробел, который выталкивает правую сторону стола с экрана и требует горизонтального прокрутки для просмотра содержимого. Код довольно прост. Я создаю двенадцать строк столбца несколько раз.

например

<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>
  • 0
    Это поможет, если вы создадите jsfiddle с полным HTML-кодом. Может быть, у вас есть невидимая боковая панель или что-то еще.
  • 0
    @MurifoX Я добавил полный HTML выше.
Теги:
zurb-foundation

1 ответ

0

Какую версию Фонда вы используете? В Foundation 4 разметка должна быть:

<div class="row">
  <div class="large-twelve small-twelve columns">
    <h1>Customers</h1>
  </div>
</div>
  • 0
    Спасибо, я просто изменил это, но у меня все та же проблема.
  • 0
    Будет трудно диагностировать вашу проблему, не видя того, что на самом деле происходит на живой странице. Вы можете опубликовать ссылку? В отсутствие этого - вы использовали инструменты Chrome Dev или Firebug для проверки того, что происходит?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню