叽叽喳喳Bootstrap下拉翡翠不能正确渲染

我想不出如何呈现翡翠Bootstrap的导航栏中的简单下拉菜单。试图使这个HTML：叽叽喳喳Bootstrap下拉翡翠不能正确渲染

<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和嵌套似乎是一回事。 “为了节省空间，jade提供嵌套标签的内联语法。'a：img是如何嵌套的。我在这里看到使用|（管道符号）的解释http://jade-lang.com/reference/plain-text /但是我不认为他们会这样解释......不是像我这样的新手去找Jade –

我认为你看到的问题是由于'span.caret Tools'不是嵌套 - 注意到这会导致'工具'不'' Tools'。AFAIK无法使用以下形式将.caret和Tools分离为单独的标签：简写 – 7zark7

叽叽喳喳Bootstrap下拉翡翠不能正确渲染

回答

相关问题