Question

使用Jade / Bootstrap并尝试在nodejs / express设置中应用网格系统。我想要的页面有一个顶部栏，下面有一个页眉，然后是两列。我阅读了html示例，然后将这些想法翻译成了jade。下面的Jade代码垂直堆叠页面标题，页面内容和辅助页面内容（请参阅index.jade）。预期的是后两者将是并排的。到目前为止：正如使用'nodemon'看到的所有css和脚本文件都正确加载，我已经验证了Jade中的缩进，我已阅读各种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 &copy; 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

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

2 个答案: