Question

在我的导航栏中，我有“事件”下拉菜单（请参阅打印屏幕）。因此，如果我将鼠标悬停在其上，则会出现下拉菜单。在dropdown-toggle disabled的帮助下，如果我点击活动链接，我将转到活动页面。但我希望在屏幕宽度小于768px时删除此禁用的属性。我知道，我可以用js做到这一点，但有没有办法只用引导程序做到这一点？在代码中它看起来像这个

<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

我能想到的只有pure-bootstrap，no-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>

Answer 2

您可以使用隐藏的标签隐藏在某些屏幕尺寸上：Visibility Breakpoints

因此，对于＆lt; 768，您可以添加课程.hidden-xs和.hidden-sm

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

2 个答案: