Jade 中的 Twitter Bootstrap 下拉菜单无法正确呈现

Question

我不知道如何在 Jade 的 Bootstrap 导航栏中呈现简单的下拉菜单。尝试呈现此 HTML：

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

任何人都知道如何以正确的方式做到这一点？

Answer 1

您不能同时使用 : 速记和嵌套。您需要：

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