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.フッター

しかし、ページが次のようになっているため、CSS が適用されていないようです。

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

css は、bootstrap/css というフォルダーにあります。

4

2 に答える 2

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 に答える