3

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

布局.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

索引.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
4

2 回答 2

2

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

所以发布版本差异。

于 2013-10-15T17:41:59.860 回答
0

你可以试试这个：

row
col-md-4
    h2 Page Content
col-md-4
    h3 Secondary Content
于 2017-01-14T17:56:40.980 回答