Bootstrap CDN не отображается в шаблоне Jade - PullRequest
Новая
       29

Bootstrap CDN не отображается в шаблоне Jade

0 голосов
/ 16 февраля 2019

Я создаю приложение Express и для рендеринга представлений использую движок представлений Jade.Я хочу использовать загрузчик для стилизации компонентов.Я имею в виду Bootstrap CDN в моем теге.Но CSS не работает.

Мне нужны свежие глаза, чтобы проверить эту проблему.Вот мой нефритовый файл - 

doctype
html(lang="en")
head
    title Issue Tracker
    meta(charset='utf-8')
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel='stylesheet', href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css", integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO")
    script(src="https://code.jquery.com/jquery-3.3.1.slim.min.js", integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo",
    crossorigin="anonymous")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js", integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49",
    crossorigin="anonymous")
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js", integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy",
    crossorigin="anonymous")
body
    div.row
        div.col-md-1
        div.col-md-10
            div.container-fluid

                div.jumbotron
                    h3 Welcome!
                    h1.display-4 Issue Tracker
                    p.lead ILP-001 ClientSide Integrated Project Issue-Tracker

            div.row
                div
                    div.table-responsive
                        table.table
                            thead.thead-warning
                                tr
                                    th Issue Id
                                    th Description
                                    th Severity
                                    th Status
                                    th Actions
                            tbody
                                tr
                                    td 100
                                    td description
                                    td severity
                                    td status
                                    td actions
        div.col-md-1

1 Ответ

0 голосов
/ 16 февраля 2019

Выглядит пока хорошо и должно нормально работатьОднако может быть ошибка при использовании системы сетки Bootstrap.

Здесь вам не хватает класса container или container-fluid: 

body
    div.row
        div.col-md-1
        div.col-md-10

Itдолжно быть: 

body
    div.container
        div.row
            div.col-md-1
            div.col-md-10
...