我可以只在移动设备上使用 jasny-boostrap 的 rowlink 吗？答案

【问题标题】：Can I use jasny-boostrap's rowlink on mobile only?我可以只在移动设备上使用 jasny-boostrap 的 rowlink 吗？
【发布时间】：2014-06-05 20:53:00
【问题描述】：

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

【问题讨论】：

标签： jquery css twitter-bootstrap responsive-design

【解决方案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();

附：请注意，我不使用data-link 属性。

【讨论】：