Question

我有一个包含2行3列的引导表。我的桌子是1170px宽。它响应，直到我将其调整到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 table responsive解决方案。它可以工作，但我的表行中的填充和边距都消失了。这是解决问题的唯一方法，还是有人找到了不同的解决方案？

Answer 1

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

媒体查询将用于断点677px。

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

理论上，这应该使得不同大小的span12的表宽度在bootstrap中响应。

Bootstrap：调整大小时表不响应

1 个答案: