嘰嘰喳喳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下拉翡翠不能正確渲染

回答

相關問題