2

我有一个 2 行 3 列的引导表。我的桌子是 1170 像素宽。在我将其调整为 677px 并且表格消失之前，它是响应式的。我将其调整回正常大小并出现表格。

HTML：

<div class="row">
  <div class="span12">
    <table class="table table-striped table-bordered">
      <thead>
        <th>Title</th>
        <th>Template</th>
        <th></th>
      </thead>
      <tbody>
        <% @pages.each do |page| %>
          <tr class="page">
            <td class="page-title span7"><%= page.title %></td>
            <td class="span3"><%= page.page_template.name %></td>
            <td class="page-actions span4 centered">
              <%= link_to 'Edit', edit_page_path(page), class: 'btn btn-table-action' %>
            </td>
          </tr>
        <% end -%>
      </tbody>
    </table>
  </div>
</div>

我研究了Bootstrap 表响应解决方案。它有效，但我的表格行中的填充和边距都消失了。这是解决它的唯一方法还是有人找到了不同的解决方案？

4

1 回答 1

1

您可以尝试使用媒体查询手动执行此操作。

媒体查询将针对断点 677px。

@media (max-width: 680px) {
.table {
    max-width: inherit; 
  }
}

从理论上讲，这应该使跨度12 的表宽度在引导程序中响应不同的大小。

于 2013-10-24T10:29:36.527 回答