Bootstrap 无法正确加载样式

Question

我正在尝试使用引导程序编写一个小型应用程序，但它似乎根本没有加载样式，即使我正确包含了所有引导程序引用，这里有一些代码（我正在使用 PUG，但我可以提供最终的 HTML（如果需要）

extends layout

block content
  link(rel='stylesheet', href='/stylesheets/index.css')

  .container
    .row
      .col-md-8
        section
          h1.entry-title
            span Sign Up
          hr
          form#signup.form-horizontal(method='post' name='signup' enctype='multipart/form-data')
            .form-group
              label.control-label.col-sm-3
                | Email ID 
                span.text-danger *
              .col-md-8.col-sm-9
                .input-group
                  span.input-group-addon
                    i.fas.fa-envelope-open-text
                  input#emailid.form-control(type='email' name='emailid' placeholder='Enter your Email ID' value='')
            .form-group
              .col-xs-offset-3.col-xs-10
                input.btn.btn-primary(name='Submit' type='submit' value='Sign Up')

布局的代码是这样的

doctype html
html(lang='en')
  head
    title= title

    meta(charset='utf-8')
    meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
    link(href='bootstrap/css/bootstrap.css', rel='stylesheet', media="all")

  body
    block content

    script(src='jquery/jquery-3.4.1.min.js')
    script(src='bootstrap/js/bootstrap.bundle.js')
    script(src='https://kit.fontawesome.com/ae629fb23c.js')

我确实检查了所有文件，它确实加载了引导 css 和 js，只是没有应用任何样式，如此处所示

Screenshot

Answer 1

根据您的模板设置方式，加载自定义样式的link 元素放置在body 中，而不是它所属的head 中。试试这样的东西，它利用了prepend and append 指令：

layout.pug

doctype html
html(lang='en')
  head
    block head
      title= title
      meta(charset='utf-8')
      meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
      link(href='bootstrap/css/bootstrap.css', rel='stylesheet', media="all")

  body
    block content
      script(src='jquery/jquery-3.4.1.min.js')
      script(src='bootstrap/js/bootstrap.bundle.js')
      script(src='https://kit.fontawesome.com/ae629fb23c.js')

page.pug

extends layout

append head
  link(rel='stylesheet', href='/stylesheets/index.css')

prepend content
  .container
    .row
      .col-md-8
        section
          h1.entry-title
            span Sign Up
          hr
          form#signup.form-horizontal(method='post' name='signup' enctype='multipart/form-data')
            .form-group
              label.control-label.col-sm-3
                | Email ID 
                span.text-danger *
              .col-md-8.col-sm-9
                .input-group
                  span.input-group-addon
                    i.fas.fa-envelope-open-text
                  input#emailid.form-control(type='email' name='emailid' placeholder='Enter your Email ID' value='')
            .form-group
              .col-xs-offset-3.col-xs-10
                input.btn.btn-primary(name='Submit' type='submit' value='Sign Up')