Bootstrap 没有正确显示 `.nav.nav-tabs`

Question

我在快递网站上工作。为了制作我的 UI 的原型，我使用的是玉，不幸的是，它对我来说有点尴尬。当我查看该站点时，我看到了这个：

我希望它们看起来像这样：http://getbootstrap.com/components/#nav-tabs

我的玉在这里：

//- views/layout.jade

doctype html
html(lang='en')
    head
        meta(charset='UTF-8')
        block BLOCK_STYLES
            link(rel='stylesheet', type='text/css', href='/style.css')
            link(rel='stylesheet', type='text/css', href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css')
        title= title ? title : 'Exaid'
    body
        #header
            #nav.nav.nav-tabs
                - var nav = [{ text: 'Home', url: '/' }, { text: 'About', url: '/about' }, { text: 'Contact', url: '/contact' }, { text: 'Connect', url: '/auth' }];
                for button in nav
                    a(href=button.url)
                        li #{button.text}
            #logo
                a(href='/') Exaid
        #main
            block BLOCK_MAIN
        #footer
        block BLOCK_SCRIPTS
            // accidentally deleted jquery line. sorry bout this CDN
            script(type='text/javascript', src='//code.jquery.com/jquery-2.1.3.min.js')
            script(type='text/javascript', src='//rawgit.com/julianshapiro/velocity/master/velocity.min.js')
            script(type='text/javascript', src='/script.js')
            script(type='text/javascript', src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js')

我检查了错误，但唯一的错误与 non-related 空脚本文件有关。我做错了什么吗？

Answer 1

嗯，你永远不会设置将包含导航的实际 <ul>。

ul.nav.nav-tabs
  li: a.active(href="link") Link Text
  li: a(href="link") Link Text

这是最简单的方法。

Bootstrap 没有正确显示 `.nav.nav-tabs`

Bootstrap does not display `.nav.nav-tabs` correctly

navbar

twitter-bootstrap