css - 如何在 bootstrap 3 的特定屏幕宽度上禁用元素属性

Question

在我的导航栏中，我有事件下拉菜单(见打印屏幕)。所以如果我将鼠标悬停在它上面，就会出现下拉菜单。在 dropdown-toggle disabled 的帮助下，如果我点击事件链接，我将转到事件页面。但我想在屏幕宽度小于 768px 时删除此禁用属性。我知道，我可以用 js 来做，但是有没有办法只用 bootstrap 来做？在代码中它看起来像这样

<a class="dropdown-toggle disabled" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
                        <span class="caret"></span></a>

所以当屏幕宽度小于 768px 时我想删除禁用属性

Answer 1

我能想到的唯一纯 Bootstrap 、无 JS 的解决方案是复制代码中的元素，禁用版本具有 hidden-xs 类，非禁用版本具有类 visible-xs-inline-block(或 visible-xs-block，也许吧？不确定您想要哪个显示属性)。

<a class="dropdown-toggle disabled hidden-xs" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
                    <span class="caret"></span></a>
<a class="dropdown-toggle visible-xs-inline-block" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
                    <span class="caret"></span></a>