Question

我尝试在响应式网站上使用Jasny Bootstrap's Row Link功能。它工作正常，但是，我想在桌面屏幕尺寸上禁用它。有没有办法做到这一点？或者只对断点以下的屏幕尺寸启用它？如果重要的话，我在动态创建的表上使用它。谢谢！

Answer 1

rowlink插件使用JavaScript。媒体查询不容易控制这一点。相反，您可以使用modernizr来检测触控设备。

<table class="table table-hover">
  <tbody class="rowlink-touch">
    ...
  </tbody>
</table>

接下来复制rowlink CSS并添加一个仅适用于触摸设备的rowlink-touch类。

html.touch .table.rowlink-touch td:not(.rowlink-skip),
html.touch .table .rowlink-touch td:not(.rowlink-skip) {
  cursor: pointer;
}

html.touch .table.rowlink-touch td:not(.rowlink-skip) a,
html.touch .table .rowlink-touch td:not(.rowlink-skip) a {
  color: inherit;
  font: inherit;
  text-decoration: inherit;
}

html.touch .table-hover.rowlink-touch tr:hover td,
html.touch .table-hover .rowlink-touch tr:hover td {
  background-color: darken(@table-bg-hover, 15%);
}

上次激活.rowlink-touch元素的行链接。

$('.rowlink-touch').rowlink();

P.S。请注意，我不使用data-link属性。

我只能在手机上使用jasny-boostrap的rowlink吗？

1 个答案: