html - 某些看似随机的引导样式元素在 Express/Node 中不起作用

Question

我对 Web 开发和 express/node 还比较陌生，但是在遇到这个问题之前我还是很有信心的。我整天都在与它作斗争。我正在使用 Express 和 Node 构建一个简单的单页应用程序，并且在我的传统 html 网页/应用程序中工作的 Bootstrap 样式的某些方面在转移它们后现在无法工作。我的应用程序看起来几乎与在 html 中创建的应用程序相同，只是表单样式和导航栏样式显示不正确。我相信这与 Bootstrap ml、mr 和 mx 类有关，因为它们的格式不正确，但我不知道为什么。

这是我第一次使用 PUG，所以我希望它与从 HTMl 迁移到 PUG 有关，但我并不乐观。

这是我的文件结构 文件结构

这是我的 PUG

    doctype html
head
  // meta tags
  meta(charset='utf-8')
  meta(name='viewport' content='width=device-width, initial-scale=1')
  meta(name='description' content='Specializing in hair and makeup services for weddings, senior pictures and formal events.')

  // css
  link(rel='stylesheet' href='/node_modules/bootstrap/dist/css/bootstrap.min.css')
  link(rel="stylesheet" href='/node_modules/font-awesome/css/font-awesome.min.css')
  link(rel="stylesheet" href='/node_modules/slick-carousel/slick/slick.css')
  link(rel="stylesheet" href='/node_modules/slick-carousel/slick/slick-theme.css')
  link(rel='stylesheet' href='/css/styles.css')

  // Google font css
  link(rel='preconnect' href='https://fonts.gstatic.com')
  link(href='https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap' rel='stylesheet')

  title Kaylee Derrick Hair and Makeup

navbar#navbar.navbar.sticky-top.navbar-expand-lg
  .container-fluid
    a.navbar-brand(href='#')
      img#nav-logo(src='images/logos/1transparentcropped.png')
    button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation')
      i.fa.fa-bars
    #navbarNav.collapse.navbar-collapse
      ul.navbar-nav.ml-auto
        li.nav-item
          a.nav-link.active(aria-current='page' href='#slider-div') Home
        li.nav-item
          a.nav-link(href='#services-div') Services
        li.nav-item
          a.nav-link(href='#about-div') About Me
        li.nav-item
          a.nav-link(href='#pricing-div') Pricing
        li.nav-item
          a.nav-link(href='#contact-me-div') Contact

#slider-div.photo-slider
  div
    img.slider-img(src='images/works/weddings/wedding (1).JPG')
  div
    img.slider-img(src='images/works/weddings/wedding (2).JPG')
  div
    img.slider-img(src='images/works/weddings/wedding (3).JPG')

#services-div.row
  .col-12.text-center
    h1.mx-auto Services
  .col-12.col-lg-3.ml-auto.card-div
    .card.mx-auto
      img.card-img-top(src='images/icons/wedding-rings.png' alt='wedding image')
      .card-body.text-center
        h5.card-title Weddings
        p.card-text
          | Some quick example text to build on the card title and make up the bulk of the card's content.
  .col-12.col-lg-3.mx-auto.card-div
    .card.mx-auto
      img.card-img-top(src='images/icons/graduation-cap.png' alt='senior picture image')
      .card-body.text-center
        h5.card-title Senior Pictures
        p.card-text
          | Some quick example text to build on the card title and make up the bulk of the card's content.
  .col-12.col-lg-3.mr-auto.card-div
    .card.mx-auto
      img.card-img-top(src='images/icons/dress.png' alt='formal event picture')
      .card-body.text-center
        h5.card-title Formal Events
        p.card-text
          | Some quick example text to build on the card title and make up the bulk of the card's content.

#about-div.row
  .col-10.col-lg-6.mx-auto.my-auto.text-center
    h1 About Me
    p
      | Some quick example text to build on the card title and make up the bulk of the card's content.
  .col-12.col-lg-6.text-center
    img#about-img(src='images/kd.jpg')

#contact-me-div.row
  .col-12.col-lg-6.text-center
    h1 Contact Me
    .row
      #contact-icon-div.col-12
        a(href='tel:[phone]')
          i.fa.fa-phone.contact-icon
        a(href='mailto:[e-mail]')
          i.fa.fa-envelope.contact-icon
  .col-12.col-lg-6
    form#contact-form.form-row(method='POST' action='send' enctype='multipart/form-data')
      .form-group.col-8.col-lg-4.ml-auto
        input#name.form-control(type='text' placeholder='Name')
      .form-group.col-8.col-lg-4.mr-auto
        input#phone.form-control(type='phone' placeholder='Phone Number')
      .form-group.col-8.col-lg-8.mx-auto
        input#email.form-control(type='email' placeholder='Email')
      .form-group.col-8.col-lg-8.mx-auto
        textarea#message.form-control(rows='3' placeholder='Enter message here')
      .form-group.col-12.text-center
        button.btn.btn-primary(type='submit' value='submit') Submit

#footer-div.row
  .col-12.col-lg-6.text-center.my-auto
    | Copyright © 2021 LD Web Design
  .col-12.col-lg-6.text-center
    a(href='https://www.facebook.com/kayleederrickhairandmakeup')
      i.fa.fa-facebook
    a(href='https://www.instagram.com/kayleederrickhairandmakeup')
      i.fa.fa-instagram
    a(href='tel:[phone]')
      i.fa.fa-phone
    a(href='mailto:[e-mail]')
      i.fa.fa-envelope

script(src='/node_modules/jquery/dist/jquery.slim.min.js')
script(src='/node_modules/jquery/dist/jquery.min.js')
script(src='/node_modules/@popperjs/core/dist/umd/popper.min.js')
script(src='/node_modules/bootstrap/dist/js/bootstrap.min.js')
script(src='/node_modules/slick-carousel/slick/slick.js')
script(src='/js/scripts.js')

这是我的 CSS

    body {
    overflow-x: hidden !important;
    font-family: 'Amatic SC', cursive;
    max-width: 100vw; }
  
.fa {
  font-family: 'FontAwesome' !important; }

.navbar {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background-color: white; }
  .navbar .navbar-brand {
    margin-left: 15%; }
  .navbar .navbar-nav {
    margin-right: 15%; }
  .navbar a {
    color: black; }

#nav-logo {
  width: 150px; }

@media screen and (max-width: 992px) {
  #nav-logo {
    width: 100px; }
  .navbar-brand {
    margin-left: 15%;
    margin-top: 5px; }
  .navbar-toggler {
    margin-right: 15%; }
  .navbar-nav {
    margin: 0 0 0 0;
    align-items: center; } }

.slick-slide {
  margin: 0 15px 0 15px; }

.slider-img {
  max-height: 65vh; }

#services-div {
  padding: 10px 0 10px 0; }
  #services-div .card {
    max-width: 15vw;
    border: none;
    background-color: transparent; }
  @media screen and (max-width: 992px) {
    #services-div .card-div {
      padding: 15px 0 15px 0; }
    #services-div .card {
      max-width: 50vw; } }

#about-div {
  padding: 10px 0 10px 0; }

#about-img {
  height: 85vh; }

#pricing-div {
  padding: 10px 0 10px 0; }
  #pricing-div .card {
    max-width: 20vw;
    border: none;
    background-color: transparent; }
    #pricing-div .card .card-header {
      background-color: transparent;
      border: none; }
  @media screen and (max-width: 992px) {
    #pricing-div .card-div {
      padding: 15px 0 15px 0; }
    #pricing-div .card {
      max-width: 50vw; } }

#contact-me-div h1 {
  margin-bottom: 0; }

#contact-me-div #contact-icon-div {
  text-align: center;
  margin-top: 5%;
  margin-bottom: 5%; }

#contact-me-div .contact-icon {
  font-size: 40px;
  padding: 20px;
  color: black; }

#contact-me-div .btn {
  background-color: black;
  border-color: black; }
  #contact-me-div .btn :hover {
    background-color: black;
    border-color: black; }

@media screen and (max-width: 992px) {
  #contact-me-div .form-group {
    margin-left: auto;
    margin-right: auto; } }

#footer-div {
  background-color: #ddaf94;
  margin-bottom: 0; }
  #footer-div i {
    color: black;
    font-size: 30px;
    padding: 20px; }

这是我的js

const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();

// set pug as view engine
app.set('view engine', 'pug');

// set views directory as directory for client side pages
app.set("views", path.join(__dirname, "views"));

// set index as first rendered page
router.get("/", (req, res) => {
  res.render("index");
});

// set /public path as holder for all public files
app.use(express.static(path.join(__dirname, './public')));

// set port 5656 to run app locally
app.use('/', router);
app.listen(process.env.port || 5656);
console.log("Running at Port 5656");

标签： htmlnode.jstwitter-bootstrapexpresspug