Comment faire bootstrap nav bouton de niveau supérieur cliquez sur le lien pour le bureau, mais pas mobile?

Question

Le comportement de menu par défaut de Bootstrap est un activateur qui fonctionne bien pour les appareils mobiles mais ne fonctionne pas pour les postes de travail si vous voulez que le bouton de haut niveau soit accessible en tant que lien tout en activant le menu déroulant. Désactivé 'à la classe de liens fonctionne bureau fonctionne mais brise les mobiles, les petits appareils que la liste déroulante ne se développe plus, il suffit de charger l'URL.

Pour obtenir le clic sur survoler pour les ordinateurs de bureau, j'ai ajouté le CSS recommandé à la feuille de style.

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

Je mis le lien du code de navigation en ajoutant la classe comme personnes handicapées:

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

Le travail se au-dessus pour les écrans 768px ou plus larges. Ce que je ne peux pas comprendre, c'est comment désactiver la classe déroulante pour les petits appareils. Si c'est le cas, cliquer sur l'élément charge la page (somepage.php) plutôt que de révéler les sous-éléments de somepage.php.

a élargi le code du menu ressemble:

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

Le but de l'élément mobile uniquement est de donner au visiteur une option pour accéder à la page une fois que le parent travaille comme un activateur de clic seulement.

J'ai essayé de jouer avec la classe bootstrap.css désactivée dans la feuille de style, mais cela n'a aucun effet sur le problème du portable. J'ai cherché dans le fichier bootstrap.js et trouvé quelques références à 'disabled' mais je ne connais pas assez le javascript pour jouer avec ça.

Answer 1

Que pensez-vous de cela? Rendre l'actif seulement visible si> 768px et l'un désactivé si < 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

Reportez-vous à ce link (utilisation hidden-xs et 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>