Question

我正在使用Bootstrap，我希望我的表格可以在移动视图中应用table-condensed类，并且table-responsive类适用于移动设备尺寸。

最好的方法是什么？有没有办法在SASS中执行此操作？

我偶然发现了extend＆＃39;在SASS，但我不认为这是我需要的，因为当我尝试实现它时，我无法在我的媒体查询中使用它，在媒体查询之外工作正常

谢谢：）

（我正在尝试包含我的代码但是我收到了错误）

Answer 1

你可以使用jquery resize函数

例如

$( window ).resize(function() {
 var screenwidth = $(document).width();
 if(screewidth <= 480)
 {
  $("#table").removeClass("table-responsive");
  $("#table").addClass("table-condensed");
 }
 else
 {
  $("#table").removeClass("table-condensed");
  $("#table").addClass("table-responsive");
 }
});

Answer 2

如果您正在使用SASS，则可以使用媒体查询在移动设备中指定表格的属性：

SASS：

$break-small: 320px;
$break-large: 1200px;
.table {
  //Default table properties
  @media screen and (max-width: $break-small) {
    //small screen size table properties
  }
  @media screen and (min-width: $break-large) {
    //Large screen size table properties
  }
}

如果您使用CSS：

table{
   //Regular table properties
}
@media screen and (min-width: 480px) {
    //small screen size table properties
}

在移动视图中更改表类？

2 个答案: