如何為桌面制作引導導航頂級按鈕可點擊鏈接但不是移動？

Question

Bootstrap的默認菜單行為是一個非常適合移動設備的激活器，但如果您希望頂級按鈕可單擊作為鏈接同時能夠在懸停時激活下拉菜單添加“禁用”，則它不適用於桌面鏈接類使桌面工作，但隨着下拉列表不再擴展，打破移動，小設備，只需加載URL。

為了點擊桌面懸停，我將推薦的CSS添加到樣式表中。

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

我設置了鏈接導航代碼，將禁用的類添加為：

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

以上使其適用於768px或更寬的屏幕。 我無法弄清楚的是如何禁用小型設備的下拉類。 如果它在那里然后點擊該項加載頁面（somepage.php）而不是揭示somepage.php下的子項。

擴展菜單代碼如下：

<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>

僅移動項目的目的是在父母僅作為點擊激活器工作時為訪問者提供進入頁面的選項。

我嘗試在樣式表中弄亂bootstrap.css禁用類，但這對移動問題沒有影響。 我搜索了bootstrap.js文件，發現了一些對'禁用'的引用但是不知道足夠的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

請參閱此鏈接 （使用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>