Jade/Bootstrap + Nodejs：网格渲染列不正确

Question

新使用 Jade/Bootstrap 并尝试在 nodejs/express 设置中应用网格系统。我想要的页面有一个顶栏，它下面有一个页眉，然后是下面的两列。我阅读了 html 示例，然后将这些想法翻译成玉。下面的 Jade 代码垂直堆叠页眉、页面内容和二级页面内容（参见 index.jade）。预期的是后两者将并排。到目前为止：所有 css 和脚本文件都被正确加载，如使用“nodemon”所见，我已经在 J​​ade 中验证了缩进，我已经阅读了各种 Bootstrap 文档，并在 Stack 中寻找了类似的问题。渲染实际上看起来像是为小屏幕格式化的。我做错了什么？

layout.jade

doctype 5
html
  head
    title= title
    link(rel='stylesheet', type='text/css', href='lib/bootstrap/css/bootstrap.css')
    link(rel='stylesheet',  type='text/css', href='stylesheets/custom.css')
    link(rel='stylesheet',  type='text/css', href='stylesheets/style.css')

    script(type='text/javascript', src='lib/jquery/jquery-1.10.2.min.js')
    script(type='text/javascript', src='lib/bootstrap/js/bootstrap.min.js')
  body

    block content

index.jade

extends layout
block content
    div.topbar
        div.fill
            div.container
                a.brand(href='#') #{title}
                ul.nav
                    li.active
                        a(href='#') Home
                    li
                        a(href='#about') About
                    li
                        a(href='#contact') Contact
                form.pull-right(method="post", id="loginForm")
                    input.input-small(id="username", type="text", name="User", placeholder="Username")
                    input.input-small(id="password", type="password", name="Password", placeholder="Password")
                    input.btn.primary(type="submit", value="Sign In")
                p#loginPrompt.pull-right.login-prompt
    div.container
        div.content
            div.page-header
                h1 Main Page
                small Welcome to #{title}
            div.row
                div.span4 
                    h2 Page Content
                div.span4
                    h3 Secondary Content
        div.footer
            p © test 2013

Answer 1

Bootstrap 3 进行了一些更改，重命名了一些关键类，包括 span 类，因此您需要改用 col-，如 col-md-4：

div.row
    div.col-md-4
        h2 Page Content
    div.col-md-4
        h3 Secondary Content

或者甚至类似的东西，如果你希望它是电话的一列，其他的两列：

div.row
    div.col-xs-12.col-sm-4
        h2 Page Content
    div.col-xs-12.col-sm-4
        h3 Secondary Content

SO post on version differences.

Answer 2

你可以试试这个：

row
col-md-4
    h2 Page Content
col-md-4
    h3 Secondary Content