时间戳

首页 > 解决方案 > dash-bootstrap-components 未正确显示 dbc.Col / dbc.Row

python - dash-bootstrap-components 未正确显示 dbc.Col / dbc.Row

问题描述

我尝试使用以下代码在破折号应用程序中创建列块：

import os
import sys
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
def init_dashboard(server):
    """Create a Plotly Dash dashboard."""
    dash_app = dash.Dash(
        __name__,
        external_stylesheets=[dbc.themes.BOOTSTRAP],
        meta_tags=[{"name": "viewport", "content": "width=device-width"}],
        server=server,
        routes_pathname_prefix="/distfinder/"
        
    )
    html_file_path = os.path.join(os.getcwd(), 'templates', 'dashapp.html')
    print(html_file_path)
    with open(html_file_path, 'r') as f:
        html_layout = f.read()
    dash_app.index_string = html_layout
    
    def serve_layout():
        html_element = html.Div([
            html.Div([
                html.H1("Bootstrap Grid System Example")
                ,dbc.Row(dbc.Col(html.Div(dbc.Alert("This is one column", color="primary"))))
                ,dbc.Row([
                        dbc.Col(html.Div(dbc.Alert("One of three columns", color="primary")))
                        ,dbc.Col(html.Div(dbc.Alert("One of three columns", color="primary")))
                        ,dbc.Col(html.Div(dbc.Alert("One of three columns", color="primary")))
                        ])
                    ])
        ])
        return html_element

    dash_app.layout = serve_layout
    return dash_app.server

但是，我仍然收到如下显示： 在此处输入图像描述

我正在构建一个嵌套在我的烧瓶网站中的 dashapp，并且必须在一个特定页面中创建一个单独的 Dash 实例，而烧瓶网站的其余部分通过 wsgi.py 运行。文件结构如下所示：

personal_website 
+--separate_dash_folder
|  |--dashboard.py <- where my dashapp reside
| 
+--static
|  |
|  +--css
|  +--js
|  +--files
|  +--fonts
|  +--img
|
+--templates
|  |
|  +--base.html
|  +--dashapp.html
|  +--home.html
|  \--the rest
|
+--flaskapp.py
+--wsgi.py

我经历了一些 stackoverflow 问题，但似乎都没有解决我的问题。 dash_bootstrap_components 安装成功但无法识别 如何修复我的 Plotly Dash 应用程序组织不正确

标签： pythonflaskplotly-dash

解决方案

在摆弄我自己的源代码之后，我意识到在 dash_app.index_string (dashapp.html) 的烧瓶应用程序中使用非引导 CSS 将导致 dash_bootstrap_components 出错。

推荐阅读