Bootstrap表僅縮寫爲xs

Question

我試圖使用table-condensed，但只有當xs。我試過這個，但沒有運氣。

<table class="hidden-xs table"> 
<table class="hidden-sm hidden-md hidden-lg table table-condensed"> 

它隱藏了第二個整個表。有沒有一種方法可以在不重複整個表格結構的情況下僅以xs濃縮？

Answer 1

table-condensed除了改變填充以外不做其他任何操作。相反，複製表，這將是更好地添加自己的CSS類，在最小（XS）斷點工程..

@media (max-width: 768px) { 
    .table-condensed-xs > thead > tr > th, 
    .table-condensed-xs > tbody > tr > th, 
    .table-condensed-xs > tfoot > tr > th, 
    .table-condensed-xs > thead > tr > td, 
    .table-condensed-xs > tbody > tr > td, 
    .table-condensed-xs > tfoot > tr > td { 
    padding: 5px; 
    } 
} 

http://codeply.com/go/5ndhSVOeeh

或者，您可以覆蓋現有table-condensed類這樣..

@media (min-width: 768px) { 
    .table-condensed > thead > tr > th, 
    .table-condensed > tbody > tr > th, 
    .table-condensed > tfoot > tr > th, 
    .table-condensed > thead > tr > td, 
    .table-condensed > tbody > tr > td, 
    .table-condensed > tfoot > tr > td { 
    padding: 10px; 
    } 
} 

Answer 2

簡短回答否。使用本地引導程序，您不能根據hidden-*標籤來操作其他類。

如果您只想在xs上使用table-condensed，則需要使用visible-xs-block重複該代碼，並使用hidden-xs標記不需要的代碼。

您可以編寫自定義CSS，或者使用jQuery執行此操作，您可以抓取$('table.visible-xs-block')並向其添加類table-condensed：$('table.visible-xs-block').addClass('table-condensed')。這應該工作，標記是從我的記憶，所以調整它到您的需求。