当分辨率低于768px时，bootstrap 3中的响应表会加入

Question

我有一个页面，我在其中使用多个表格; ng-repeat指令。下面是我在网页中的html代码。

<table class="table table-bordered" ng-repeat="item in jsonArray">
  <thead>
  <tr>
    <th colspan="2">Title</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td id="Id">
      <div class="col-lg-1 col-sm-2 col-xs-4"><span class="">Text data: </span></div>
      <div class="col-lg-8 col-sm-5 col-xs-8"><span class="">Text Data</span><span class="">Text data</span></div>
      <div class="col-lg-2 col-sm-3 col-xs-3"><span class="">Text data</span></div>
      <div class="col-lg-1 col-sm-2 col-xs-9">
        <button class="btn button-offset" ng-click="editData()" id="editDataBtn_1"><span class="glyphicon glyphicon-edit"></span></button>
        <button class="btn button-offset hide" ng-click="saveData()" id="saveDataBtn_1"><span class="glyphicon glyphicon-save"></span></button>
      </div>
    </td>
  </tr>
  <tr>
    <td id="Id_1">
      <div class="col-lg-1 col-sm-2 col-xs-4"><span class="">Text data: </span></div>
      <div class="col-lg-8 col-sm-5 col-xs-8"><span class="">Text Data</span><span class="">Text data</span><</div>
      <div class="col-lg-2 col-sm-3 col-xs-3"><span class="">Text data</span></div>
      <div class="col-lg-1 col-sm-2 col-xs-9">
        <button class="btn button-offset" ng-click="editData()" id="editDataBtn_2"><span class="glyphicon glyphicon-edit"></span></button>
        <button class="btn button-offset hide" ng-click="saveData()" id="saveDataBtn_2"><span class="glyphicon glyphicon-save"></span></button>
      </div>
    </td>
  </tr>
  </tbody>
</table>

请参考以下图片了解输出差异：

调整大小之前（分辨率＆gt; 768px）

调整大小后（分辨率<768px）

请原谅水印：）

Answer 1

在css中，只为宽度＆lt;而将margin-bottom添加到表中768px：

.table{
    @media only screen and (max-width: 767px){
       margin-bottom: 20px!important;
    }
}