Bootstrap 没有正确加载样式

Question

我正在尝试使用 bootstrap 编写一个小型应用程序，但它似乎根本不会加载样式，即使我正确地包含了所有 bootstrap 引用，这里是一些代码（我正在使用 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')

我确实检查了所有文件，它确实加载了 bootstrap 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')

Bootstrap 没有正确加载样式

Bootstrap not loading styles properly

node.js

bootstrap-4

pug