Twitter bootstrap 3 当屏幕变小时,我能做些什么来查看页面的所有内容

Twitter bootstrap 3 当屏幕变小时,我能做些什么来查看页面的所有内容,twitter-bootstrap-3,Twitter Bootstrap 3,我是新手。当屏幕变小时,我能做些什么来查看页面的所有内容。“活动”面板中的表不随屏幕大小调整。我有一个名为MiddleDiv的div,可以在其中动态附加1个或多个表 <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xs-12"> <div class="panel panel-pr

我是新手。当屏幕变小时,我能做些什么来查看页面的所有内容。“活动”面板中的表不随屏幕大小调整。我有一个名为MiddleDiv的div,可以在其中动态附加1个或多个表

    <div class="container">

<div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xs-12">
      <div class="panel panel-primary">
         <div class="panel-heading">Activities</div>
         <div class="panel-body">
            <div class="table-responsive" id="MiddleDiv">
               <table width="100%" style="margin-bottom:10px" id="Table_1" class="TableBlankClass table">
                  <tbody>
                     <tr class="bg-success">
                        <td style="font-weight:bold" id="ActivityCompany_1" colspan="3">Company(Bill to): TD General Insurance Company</td>
                        <td style="font-weight:bold" id="ActivityClient_1" colspan="6">Client: Test Adjsuter</td>
                     </tr>
                     <tr>
                        <td colspan="3">
                           <table width="100%">
                              <tbody>
                                 <tr>
                                    <td><button class="btn btn-danger btn-xs" id="ActivityDel_1" onclick="DelActivity('Table_1')" type="button">Del</button></td>
                                    <td class="ActivitiesHeading">Activity</td>
                                    <td>
                                       <select onchange="GetRate('Table_1')" id="ActivityTypeDropDown_1" style="width:200px;" class="form-control TableSelectClass">
                                          <option value="- Select One -" selected="">- Select One -</option>
                                          <option value="Accomodation">Accomodation</option>

                                       </select>
                                    </td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                        <td class="ActivitiesHeading">Comments</td>
                        <td colspan="2" class="ActivitiesHeading"><textarea rows="1" style="width: 275px; height: 35px;" class="form-control" id="ActivityComments_1"></textarea></td>
                        <td class="ActivitiesHeading">Status<span id="ActivitySpan_1"></span></td>
                        <td colspan="2" class="ActivitiesHeading">
                           <select onchange="CalculateActivities(); CreateRemoveReasonButton('Table_1');" id="ActivityStatusDropDown_1" style="width:200px;" class="form-control">
                              <option value="24859" selected="">Waiting To Process Payer Invoice</option>

                           </select>
                        </td>
                     </tr>
                     <tr>
                        <td class="ActivitiesHeading">Rate</td>
                        <td class="ActivitiesHeading">Qty</td>
                        <td class="ActivitiesHeading">Discount</td>
                        <td class="ActivitiesHeading">Discount %</td>
                        <td class="ActivitiesHeading">Reason For Discount</td>
                        <td class="ActivitiesHeading">Tax Applicable</td>
                        <td class="ActivitiesHeading">Taxes</td>
                        <td class="ActivitiesHeading">SubTotal</td>
                        <td class="ActivitiesHeading">Gross Total</td>
                     </tr>
                     <tr>
                        <td><input type="text" onblur="if (this.value=='') {this.value = 0;}" value="0" onkeyup="CalculateActivities()" id="ActivityRate_1" class="form-control TableNumericClass"></td>
                        <td><input type="text" onblur="if (this.value=='' || this.value=='0') {this.value = 1;}" value="1" onkeyup="CalculateActivities()" id="ActivityQty_1" class="form-control TableNumericClass"></td>
                        <td><input type="text" onblur="if (this.value=='0') {this.value = '';}" value="" onkeyup="CalculateActivities()" id="ActivityDiscount_1" class="form-control TableDiscountClass"></td>
                        <td><input type="text" onblur="if (this.value=='0') {this.value = '';}" value="" onkeyup="CalculateActivities()" id="ActivityDiscountPercentage_1" class="form-control TableDiscountClass"></td>
                        <td>
                           <select id="ReasonForDiscountDropDown_1" class="form-control">
                              <option value="- Select One -" selected="">- Select One -</option>
                              <option value="Late Report Delivery">Late Report Delivery</option>
                              <option value="Incorrect File Management">Incorrect File Management</option>
                              <option value="Client Satisfaction">Client Satisfaction</option>
                              <option value="Other - See Service Notes">Other - See Service Notes</option>
                           </select>
                        </td>
                        <td>
                           <select onchange="CalculateActivities()" id="ActivityTaxApplicable_1" class="form-control">
                              <option value="Yes" selected="">Yes</option>
                              <option value="No">No</option>
                           </select>
                        </td>
                        <td><img width="15" height="15" title="&lt;body&gt; &lt;table width=&quot;150px&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;1&quot;&gt; &lt;tr&gt; &lt;td class=&quot;ToolTipTableClass&quot;&gt;Tax1 :&lt;/td&gt; &lt;td class=&quot;ToolTipTableClass&quot;&gt;0.00&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=&quot;ToolTipTableClass&quot;&gt;Tax2 :&lt;/td&gt; &lt;td class=&quot;ToolTipTableClass&quot; &gt;0.00&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt;" src="/files/404048/93171/Info-32.png" id="ActivityTaxesAmount_1" class="TaxesClass" data-original-title="&lt;body&gt; &lt;table width=&quot;150px&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;1&quot;&gt; &lt;tr&gt; &lt;td class=&quot;ToolTipTableClass&quot;&gt;Tax1 :&lt;/td&gt; &lt;td class=&quot;ToolTipTableClass&quot;&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=&quot;ToolTipTableClass&quot;&gt;Tax2 :&lt;/td&gt; &lt;td class=&quot;ToolTipTableClass&quot; &gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt;"></td>
                        <td id="ActivitySubTotal_1">100.00</td>
                        <td id="ActivityGrossTotal_1">100.00</td>
                     </tr>
                     <tr>
                        <td class="ActivitiesHeading">Measure</td>
                        <td colspan="2" class="ActivitiesHeading">GAP Code</td>
                        <td colspan="3" class="ActivitiesHeading">Other Description</td>
                        <td colspan="3" class="ActivitiesHeading">&nbsp;</td>
                     </tr>
                     <tr>
                        <td>
                           <select id="ActivityMeasure_1" class="form-control">
                              <option selected="" value="- Select One -">- Select One -</option>

                           </select>
                        </td>
                        <td colspan="2">
                           <select id="ActivityGAPCode_1" class="form-control">
                              <option value="00000" selected="">&lt;-Select One-&gt;</option>

                           </select>
                        </td>
                        <td colspan="3"><input type="text" id="ActivityOtherDescription_1" class="form-control"></td>
                        <td colspan="3">

                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xs-12">
      <div class="panel panel-primary">
         <div class="panel-heading">Total</div>
         <div class="panel-body">
            <div class="table-responsive">
               <table width="100%" class="table">
                  <tbody>
                     <tr>
                        <td class="HeadingTD">SubTotal</td>
                        <td id="AllSubTotal"></td>
                        <td class="HeadingTD">Discount</td>
                        <td id="AllDiscount"></td>
                        <td class="HeadingTD">Tax</td>
                        <td id="AllTax"></td>
                        <td class="HeadingTD">Gross Total</td>
                        <td id="AllGrossTotal"></td>
                     </tr>
                     <tr>
                        <td colspan="2" id="AddItemTD"></td>
                        <td colspan="2" id="SubmitActivitiesTD"></td>
                        <td colspan="2" id="VoidInvoiceTD"></td>
                        <td colspan="2" align="right"><button class="btn btn-primary btn-sm" onclick="window.parent.close()" type="button">Close</button></td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
</div>

活动
公司(账单收件人):TD普通保险公司
客户:测试调整器
德尔
活动
-选择一个-
住宿
评论
地位
正在等待处理付款人发票
比率
数量
优惠
折扣%
折扣理由
适用税
税
小计
总额
-选择一个-
迟交报告
不正确的文件管理
客户满意度
其他-请参阅维修说明
对
不
100
100
量
间隙代码
其他说明
-选择一个-
-选择一个-
全部的
小计
优惠
税
总额
接近

我可以看出,您只是在用一些引导类包装传统的HTML表,希望它们能够响应

这是一个很好的开始,但您需要重新考虑在使用引导时如何构造表

Bootstrap使用他们的“网格系统”

网格系统根本不使用表。它使用带有特定类的div来实现所需的布局。除非您充分使用引导网格系统,否则您将无法真正看到响应性设计

花点时间学习引导网格系统


一点旁注和个人意见:看看你的表单设计(顺便说一句,它看起来很棒),你可能不喜欢响应性设计的结果。所有表单字段最终将堆叠在彼此的顶部。这种表单设计实际上只在水平方向上起作用。如果它是垂直对齐的,它可能会变得非常混乱。如果是我的话,我可能会设计出适合平板电脑大小但不可移动的界面。

没有链接,但你可以通过
col-lg-12 col-md-12 col-sm-12 col-xs-12
将引导类和非引导类以及内联样式属性混合在一起。你应该包括你的自定义类来帮助人们解决这个问题。有什么建议我可以保持HTML表的结构,它是响应以及?