2

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 テーブルレスポンシブソリューションを調べました。それは機能しますが、テーブルの行のパディングとマージンがすべてなくなりました。これが唯一の方法ですか、それとも別の解決策を見つけた人はいますか?

4

1 に答える 1

1

メディア クエリを使用して手動でこれを行うことができます。

メディア クエリは、ブレークポイント 677px に対するものになります。

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

理論的には、これにより、さまざまなサイズでブートストラップで応答する span12 のテーブル幅が作成されます。

于 2013-10-24T10:29:36.527 に答える