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

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

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

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

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

Twitter Bootstrap Dropdown in Jade Not Rendering Correctly

html

node.js

twitter-bootstrap

pug