Bootstrap navbar badges используя Jade

Question

Я пытаюсь получить значки, отображаемые на навигационной панели с помощью Jade/Pug.

То, что я вижу, вместо «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 

Answer 1

Поместите все это на 1 строку, например, Span.badge.badge-important 4'