Question

我正在构建一个Express应用，并使用Jade视图引擎渲染视图。我想使用Bootstrap对组件进行样式设置。我将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

Answer 1

到目前为止看起来不错，应该可以正常工作。但是，使用Bootstrap的grid system可能会出错。

在这里您缺少类container或container-fluid：

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

应该是：

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

Bootstrap CDN未在玉器模板中呈现

1 个答案: