如何让 bootstrap 导航 top-level 按钮可点击 link 用于桌面而非移动设备？

Question

Bootstrap 的默认菜单行为是作为一个激活器，非常适合移动设备，但如果您希望 top-level 按钮可点击为 link，则不适用于台式机同时能够在悬停时激活下拉菜单将 'disabled' 添加到 link class 可以使桌面正常工作，但会破坏移动设备，小型设备，因为下拉菜单不再扩展，只需加载URL.

为了在桌面上点击鼠标悬停，我在样式表中添加了推荐的 CSS。

/* iPad & larger display on hover */
@media (min-width: 768px) {
  ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
  }
}

我将添加禁用 class 的 link 导航代码设置为：

<a href="somepage.php" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="caret"></span></a>

以上内容适用于 768 像素或更宽的屏幕。我想不通的是如何禁用小型设备的下拉菜单 class。如果它在那里，则单击该项目将加载页面 (somepage.php)，而不是在 somepage.php 下显示 sub-items。

扩展菜单代码如下：

<ul class="nav navbar-nav">
  <li class="dropdown <?php if ( $this_file == "somepage.php" ) { echo ' active '; } ?>">
    <a href="somepage.php" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="_caret"></span></a>
    <ul class="dropdown-menu min-width" role="menu">
      <li class="mobile-only"><a href="somepage.php" <?php if ( $this_file == "somepage.php" ) { echo "class=\"active\""; } ?>>Some Page</a></li>
      <li><a href="item2.php" <?php if ( $this_file == "item2.php" ) { echo "class=\"active\""; } ?>>Item 2</a></li>
      <li><a href="item3.php" <?php if ( $this_file == "item3.php" ) { echo "class=\"active\""; } ?>>Item 3</a></li>
    </ul>
  </li>
  ...
</ul>

mobile-only 项的目的是在 parent 仅用作点击激活器后，为访问者提供进入页面的选项。

我尝试在样式表中修改 bootstrap.css 禁用 class 但这对移动问题没有影响。我搜索了 bootstrap.js 文件并找到了一些对 'disabled' 的引用，但我对 javascript 的了解还不够多，无法解决这个问题。

Answer 1

这个怎么样？仅当 >768px 时才使活动的可见，如果 <768px 则使禁用的可见。

<a href="somepage.php" class="visible-xs-12 dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="caret"></span></a>

<a href="somepage.php" class="hidden-xs-12 dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="caret"></span></a>

Answer 2

参考这个link（使用hidden-xs和visible-xs）

   <ul class="nav navbar-nav">
      <li class="dropdown <?php if ( $this_file == "somepage.php" ) { echo ' active '; } ?> visible-xs  " >
        <a href="somepage.php" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="caret"></span></a>
      </li>
      <li class="dropdown <?php if ( $this_file == "somepage.php" ) { echo ' active '; } ?> hidden-xs">
        <a href="somepage.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="_caret"></span></a>
        <ul class="dropdown-menu min-width" role="menu">
          <li class="mobile-only"><a href="somepage.php" <?php if ( $this_file == "somepage.php" ) { echo "class=\"active\""; } ?>>Some Page</a></li>
          <li><a href="item2.php" <?php if ( $this_file == "item2.php" ) { echo "class=\"active\""; } ?>>Item 2</a></li>
          <li><a href="item3.php" <?php if ( $this_file == "item3.php" ) { echo "class=\"active\""; } ?>>Item 3</a></li>
        </ul>
      </li>

    </ul>

如何让 bootstrap 导航 top-level 按钮可点击 link 用于桌面而非移动设备？

How do you make bootstrap nav top-level button clickable link for desktop but not mobile?

html

javascript

css

nav

twitter-bootstrap