表是不敏感的引導

Question

我有代碼來生成一個表：

<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th class="col-xs-3">Friendly Name</th> 
      <th class="col-xs-3">Unique Tracker URL</th> 
      <th class="col-xs-3">URL Endpoint</th> 
      <th class="col-xs-1">Bitly Link</th> 
      <th class="col-xs-1">Info and Settings</th> 
      <th class="col-xs-1">Danger Zone</th> 
     </tr> 
    </thead> 
    <tbody id="linksBody"> 
     <tr id="links"> 
      <td>(<a onclick="edit(this)">Edit</a>) <?php echo $row['friendly']; ?></td> 
      <td>(<a onclick="editEnd(this)">Customize</a>) <a href="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></a></td> 
      <td><a href="<?php echo $row['endpoint']; ?>"><?php echo $row['endpoint']; ?></a></td> 
      <td><a href="<?php echo $row['bitly']; ?>"><?php echo $row['bitly']; ?></a></td> 
      <td><a onclick="showDetails(this);">Show</a>/<a onclick="settings(this);">Settings</a></td> 
      <td><a onclick="del(this);">Delete</a>/<a onclick="reset(this);">Reset</a></td> 
     </tr> 
    </tbody> 
</table> 

它很好地擴展到約1275px寬，如下所示：

然而，當屏幕尺寸低於此值，則開始打破：

我能做些什麼來使我的桌子響應？

Answer 1

Bootstrap有一個這樣的類：.table-responsive。 你可以閱讀關於他的所有here。

將你的代碼包裝在這個類的div中。例如：

<div class="table-responsive"> 
    <table class="table table-hover"> 
     [...] 
    </table> 
</div> 

我希望這會幫助你！