Bootstrap：调整大小时表格没有响应

Posted 2023-03-05

【中文标题】Bootstrap：调整大小时表格没有响应

【英文标题】：Bootstrap: Table is not responsive when resizing

【发布时间】：2013-08-24 07:10:59

【问题描述】：

我有一个 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 table responsive 解决方案。它有效，但我的表格行中的填充和边距都消失了。这是唯一的解决方法还是有人找到了不同的解决方案？

【问题讨论】：

你能发布一些 html/css 以便我们查看具体细节吗？另外，您是否在链接到引导文件后链接您的自定义 css 文件？

嘿@Joe_G，我添加了一些 HTML。 Bootstrap 在我的自定义 CSS 之前

也许有帮助。与 2 相比，版本 3 的类发生了一些变化，请查看文档。这是我的例子：bootply.com/76027

我尝试在我的 周围添加一个 但得到了相同的结果。我尝试将跨度更改为 col-lg，但它压缩了我的表格并且文本从表格中移出。还有其他想法吗？也感谢 bootply 示例

【参考方案1】：

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

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

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

理论上这应该使表格宽度与 span12 的宽度相同，在 bootstrap 中不同尺寸的响应。