使用Jade的Bootstrap导航栏徽章

时间:2017-01-30 09:33:18

标签: twitter-bootstrap pug

我正在尝试使用Jade / Pug在导航栏中显示徽章。

我看到的是徽章中的“4”而不是“4”,我看到“< 4>”在徽章中。

参考:https://webdesign.tutsplus.com/tutorials/baking-bootstrap-snippets-with-jade--cms-22798

nav.navbar.navbar-default( role="navigation" )
    .navbar-header
        button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#navbar-inverse", aria-expanded="false", aria-controls="navbar")
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
        a.navbar-brand(href="#") Project name

    #navbar-inverse.collapse.navbar-collapse
        ul.nav.navbar-nav
            li.active: a( href="#") Home
            li: a( href="#about" ) About
            li: a( href="#contact" ) Contact
            li: a( href="#unknown" ) Points
              span.badge.badge-important
                4
            li.dropdown
                a.dropdown-toggle( href="#", data-toggle="dropdown", role="button", aria-expanded="false" ) Dropdown 
                    span.caret
                ul.dropdown-menu( role="menu" )
                    li: a( href="#" ) Action
                    li: a( href="#" ) Another action
                    li: a( href="#" ) Something else here
                    li.divider
                    li.dropdown-header Nav header
                    li: a( href="#" ) Separated link
                    li: a( href="#" ) One more separated link

1 个答案:

答案 0 :(得分:1)

全部放在1行,例如'span.badge.badge-important 4'