Jade/Bootstrap + Nodejs: 网格渲染列错误

Question

Jade/Bootstrap + Nodejs: 网格渲染列错误

3

我刚开始使用Jade/Bootstrap，并尝试在nodejs/express中应用网格系统。我的页面顶部有一个顶部栏，下面是一个页面标题，然后是两列。我阅读了HTML示例，然后将想法转换为Jade。下面的Jade代码垂直堆叠了页面头、页面内容和次要页面内容（请参见index.jade）。预期的是后两者将并排显示。到目前为止：所有CSS和脚本文件都已正确加载，如使用“nodemon”所见，我已验证了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

- kim bellinger

你使用的是哪个版本的Bootstrap？在3中，你的类应该像col-这样，比如col-md-4，而不是span4。关于版本差异的Stack Overflow帖子。如果这是你的问题，请告诉我，我会回复你的答案。 - MikeSmithDev

哦，求求你了...就是这样！ - kim bellinger

2个回答

0

你可以尝试这个：

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

- Mizanur Rahman

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。 - Donald Duck

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MikeSmithDev · Accepted Answer

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

版本差异的Stack Overflow帖子。