移动设备上的 TWBS 导航栏，禁用下拉菜单并改用 link

Question

有没有办法在 iPhone 和类似设备尺寸上查看时禁用 Twitter Bootstrap 3 导航栏中的下拉菜单，然后将其替换为另一个 link屏幕.

菜单占了很多space。在台式机（甚至是平板电脑）上，这无关紧要。在移动设备 phone 上，我希望它将您带到不同的页面并完全禁用下拉菜单。

Answer 1

CSS进场

我会为此使用响应式 classes。为隐藏元素添加额外标记可能并不理想，但这是最简单和最可靠的方法，并且不需要 Javascript.

demo

...
<li class="visible-xs-block"><a href="#"><span class="glyphicon glyphicon-user" aria-label="My profile"></span> My Profile</a></li>
<li class="dropdown hidden-xs">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> My Profile <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#"><span class="glyphicon glyphicon-signal"></span> Statistics</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-certificate"></span> Certificates</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-star"></span> Favorites</a></li>
        <li class="divider"></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
    </ul>
</li>
...

在上面的代码片段中，您会看到我在 <li> 上使用 visible-xs-block class，在您的替代页面上使用 link。这将确保此元素是隐藏的，但在移动设备上除外。在下拉菜单中，我使用了 hidden-xs class，它只会在移动设备上隐藏下拉菜单。

Javascript方法

您可以按照@cvrebert 的建议使用 Javascript 执行此操作，如果您不必担心对 IE8 或 IE9 的支持，则可以使用 matchMedia 轻松执行此操作。

JS（不支持IE8/9）

if (window.matchMedia("(max-width: 768px)").matches) {
  /* the view port is less than 768 pixels wide */
  /* hide your dropdown and display your link */
} else {
  /* the view port is at least 768 pixels wide */
  /* show your dropdown and hide your link */
}

如果你想要一个 Javascript 解决方案并且需要支持 IE8/IE9，这会有点复杂，因为你必须监视 window 调整大小事件。要有效地执行此操作，您可能需要去抖动或使用超时。

同样，对我来说，最好的方法是上面的 CSS 方法。

移动设备上的 TWBS 导航栏，禁用下拉菜单并改用 link

TWBS Navbar on mobile device, disable dropdown menu and use link instead

mobile

navbar

ios

drop-down-menu

twitter-bootstrap-3

demo