0

这是我的文件结构：http: //i.imgur.com/XleRVbc.png

在视图内部，我的 layout.jade 具有以下代码：

doctype 5
html
    head
        title= title
        link(rel='stylesheet', href='../bootstrap/css/bootstrap.min.css')
        link(rel='stylesheet', href='../bootstrap/css/bootstrap-responsive.min.css')
        script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
        script(src='../bootstrap/js/bootstrap.min.js')
body
    block content

这是 index.jade：

extends layout

block content
      div.top
        form.form-horizontal(method="post", id="loginForm")
          label Username
          input.span3(id="username", type="text", name="User", placeholder="Enter your             username")
          label Password
          input.span3(id="password", type="password", name="Password")
          input.btn(type="submit", value="Log In")
div.container
    div.content
          table.table.table-striped
            thead
              tr
                th Table
                th Heading
    tbody
      tr
        td Blah
        td Test
      tr
        td Hello
        td World

div.footer

但似乎没有应用 CSS，因为页面看起来像：

http://i.imgur.com/8CjRlKC.png

css 在名为 bootstrap/css 的文件夹中

4

2 回答 2

2

你用快递吗？如果是这样，您的文件结构中似乎缺少一个公用文件夹。通常你有类似的东西：

包.json

应用程序.js

节点模块/

|- ...

上市/

|-图片/

|-css/

|-js/

路线/

意见/

..并且您可以通过以下方式快速了解这些文件：

var app = module.exports = express();

...

app.use(express.static(__dirname + '/public'));

尝试将该行代码添加到 app.js（如果它不存在），创建公用文件夹，将引导文件夹移动到那里，并通过链接（rel='stylesheet', href='bootstrap/css/bootstrap.min .css') 中的玉

于 2013-10-16T22:13:28.797 回答
0

尝试使用绝对路径而不是相对路径。相对路径可能会令人困惑，因为它们是相对于app.js而不是视图。

改变

link(rel='stylesheet', href='../bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='../bootstrap/css/bootstrap-responsive.min.css')

至

link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')

还要确保您在以下行中正确地提供静态文件app.js：

app.use(express.static(path.join(__dirname, 'bootstrap')));
于 2013-10-16T22:19:21.933 回答