Bootstrap неправильно загружаются стили - PullRequest
Новая
       80

Bootstrap неправильно загружаются стили

0 голосов
/ 18 февраля 2020

Я пытаюсь написать небольшое приложение, используя 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, он просто не применяет никаких стилей, как показано здесь

Снимок экрана

1 Ответ

0 голосов
/ 18 февраля 2020

При настройке шаблонов элемент link, загружающий ваши пользовательские стили, помещается в body вместо head, к которому он относится. Попробуйте что-то вроде этого, в котором используются директивы prepend и 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')

. мопс 

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')
...