表超出引导容器宽度

Question

我有一张包含很多内容的桌子。我想将表格保持在容器宽度内。请建议我将表格包含在容器中的正确方法。我不想在一页中显示半个表格并提供更多选项来查看表格的全部内容。

<div class="container">
    <%= render :partial => "layouts/society_nav" %>
    <div align="center">
        <h3>Execution Petition Details</h3>
    </div>  
    <%= link_to "New Execution Petition Details",  new_admin_execution_petition_path, :class => "btn btn-primary btn-new" %>
    <div class="container">
<table border="1" class="datatable table-striped table-bordered" id="liq"> 
    <thead>
        <tr>

            <th rowspan="2">ID</th>
            <th rowspan="2"> Name & Address of Sale Officer</th>
            <th colspan="2">Opening Balance</th>
            <th colspan="2">Recovered</th>
            <th colspan="2">Disposed Off</th>
            <th colspan="2" >Balance</th>


            <th rowspan="2">Update</th>
            <th rowspan="2">Delete</th>
        </tr>
         <tr>


              <th>No of EPs</th>
              <th>Amount Involved</th>
              <th>No of EPs</th>
              <th>Amount Involved</th>
              <th>No of EPs </th>
              <th>Amount Involved</th>
              <th>No of EPs </th>
              <th>Amount Involved</th>

            </tr>
    </thead>
    <tbody>
            <% @petition.each do |f| %>
            <tr>

                <td><%= f.id %></td> 
                <td><%= f.name_of_sales_officer %><br><%=f.address_of_sales_officer%></td>
                <td><%= f.opening_balance_no_of_eps %></td>
                <td><%= f.opening_balance_amount_involved %></td>
                <td><%= f.recovered_no_of_eps %></td> 
                <td><%= f.recovered_amount_involved %></td>
                <td><%= f.disposed_off_no_of_eps %></td>
                <td><%= f.disposed_off_amount_involved %></td>
                <td><%= f.balance_no_of_eps%></td>

                <td><%= f.balance_amount_involved %></td>


                <td>
                    <%= link_to "<span class='glyphicon glyphicon-edit'></span>".html_safe,   edit_admin_execution_petition_path(f) %>
                </td>
                <td>
                    <%= link_to "<span class='glyphicon glyphicon-trash'></span>".html_safe, admin_execution_petition_path(f), :method => :delete, :title => "Delete Execution Petition ", "data-confirm" => "Do you really want to delete?" %>
                </td>
            </tr>
            <% end %>
        </tbody>

</table>
</div>

Answer 1

把你的表放在bootstrap的div里面。

例子：

<div class="container">
  <div class="row clearfix">
   <div class="col-md-12 column">
       ....put your table here....and bootstrap will manage it...with responsiveness
    </div>
  </div>
</div>