Twitter Bootstrap Dropdown in Jade Не визуализируется правильно

Я не могу понять, как отобразить простое выпадающее меню в навигационной панели Bootstrap в Jade. Попытка сделать этот HTML:Twitter Bootstrap Dropdown in Jade Не визуализируется правильно

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

в Джейд, как это:

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

Согласно http://jade-lang.com/reference/tags/ вы должны быть в состоянии гнезда тегов:

a: span

Но когда я пытаюсь добавлять классы в те теги, которые выглядят сумасшедшими странными http://codepen.io/thehumanscience/pen/qbLepW:

Кто-нибудь знает, как сделать это правильно?

источник

2016-02-12 Chuck Robertson

Вы не можете использовать: стенографию и гнездо одновременно. Вам необходимо:

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

источник

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

Спасибо! Это хорошо работает. Моя проблема в том, что я до сих пор не понимаю, почему это работает. Согласно http://jade-lang.com/reference/tags/: shortand и nesting, похоже, одно и то же. «Чтобы сэкономить место, jade предоставляет встроенный синтаксис для вложенных тегов». A: img - как вы гнездо . Я вижу объяснение использования символа | (символ трубы) здесь http://jade-lang.com/reference/plain-text/но я не думаю, что они объясняют это очень ... не для новичка для Jade, как я. –

Я думаю, что проблема, которую вы видите, связана с 'span.caret Tools' не вложением - обратите внимание, что это приводит к тому, что ' Tools' not ' Инструменты'. AFAIK нет возможности разделить .caret и Tools на отдельные теги, используя: стенографию – 7zark7

Twitter Bootstrap Dropdown in Jade Не визуализируется правильно

ответ

Смежные вопросы