Question

我在移动等小型设备上查看时出现问题，媒体中的桌面在小型设备中无响应。

提前谢谢。

<div class="panel panel-primary">
<div class="panel-heading ">
   <h3 class="panel-title">
       Profile
   </h3>
</div>
<div class="panel-body">
   <div class="col-xs-12 col-sm-12 col-md-12">
       <div class="media">
             <div class="media-left">
               <a href="#">
                      <img class="media-object img-size160" src="images/officestaff.jpg" alt="">
                </a>
              </div>
                    <div class="media-body">
                    <div class="table-responsive">
                        <table class="table">
                        <tr><td class="info" width="40%">Name</td><td>Jenny</td></tr>
                        <tr><td class="info">Location</td><td>New york</td></tr>
                        <tr><td class="info">Designation</td><td>Office staff</td></tr>
                        <tr><td class="info">Status</td><td>Probitionary</td></tr>.
                        </table>
                    </div>
                    </div>
       </div>                           
   </div>
</div>
</div>

Answer 1

每个Bootstrap 响应式表格，将.table中的任意.table-responsive打包，使其在小型设备（768px以下）上水平滚动。

如果您不想横向滚动，可以使用@media查询重新格式化表格。这是一个很好的例子，说明了如何做到这一点。 https://css-tricks.com/examples/ResponsiveTables/responsive.php

媒体体内的表格没有响应

1 个答案: