Twitter Bootstrap Dropdown dans Jade ne rend pas correctement

Je ne peux pas comprendre comment rendre le menu déroulant simple dans la barre de navigation de Bootstrap dans Jade. Essayer de rendre ce HTML:Twitter Bootstrap Dropdown dans Jade ne rend pas correctement

<li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     </ul> 
</li>

dans Jade comme ceci:

li.dropdown 
a.dropdown-toggle(data-toggle="dropdown", role="button", aria-haspopup="true", aria-expanded="false"): span.caret Tools 
    li 
     a(href="#") action 
    li 
     a(href="#") another action

Selon le http://jade-lang.com/reference/tags/, vous devriez être en mesure de balises nid comme:

a: span

Mais lorsque je tente de ajouter des classes à ces étiquettes, il semble fou bizarre http://codepen.io/thehumanscience/pen/qbLepW:

Quelqu'un sait comment faire cela de la bonne façon?

Source

2016-02-12 Chuck Robertson

Vous ne pouvez pas utiliser les fonctions: sténographie et imbrication en même temps. Vous auriez besoin de:

li.dropdown 
    a.dropdown-toggle(data-toggle="dropdown") 
    | Dropdown 
    span.caret 
    ul.dropdown-menu 
    li 
     a(href="#") action 
    li 
     a(href="#") another action

Source

2016-02-12 01:36:20 7zark7

Merci! Cela fonctionne bien. Mon problème est que je ne comprends toujours pas pourquoi cela fonctionne. Selon http://jade-lang.com/reference/tags/: shortand et nidification semblent être la même chose. "Pour économiser de l'espace, jade fournit une syntaxe en ligne pour les balises imbriquées." A: img est comment vous nichez Je vois l'explication pour l'utilisation du | (symbole du tuyau) ici http://jade-lang.com/reference/plain-text/mais je ne pense pas qu'ils l'expliquent très ... pas pour un novice à Jade comme moi –

Je pense que le problème que vous voyez est dû à 'span.caret Tools' pas l'imbrication - notez que ceci se traduit par ' Outils' ne pas ' Outils' AFAIK il n'y a aucun moyen de séparer le .caret et les outils en tags séparés en utilisant le: raccourci – 7zark7

Twitter Bootstrap Dropdown dans Jade ne rend pas correctement

Répondre

Questions connexes