我的数据库布局没有并排显示 [英] My layout of my dbc.Row dash bootstrap isn't displaying side by side

问题描述

我正在尝试创建一个仪表板来并排显示项目符号图表，但它们垂直地显示在彼此的下方。我将dash.bootstrap组件与ploy一起使用。很多人在不同的论坛上说，我应该在样式中添加dbc.hemes.bootstrap，这样它才能工作，但它不适合我-&>(app=dash.Dash(name，external_stylesheets=[dbc.themes.BOOTSTRAP]).

下面是我的一些代码，它显示了垂直排列的图表。我想让它们并排展示。当我第一次安装我的包时，我能够让它工作，但一旦我升级了pip，运行了其他几个包，并将我的文件夹移动到另一个位置，布局似乎坏了或什么的。有什么建议吗。我确实认为conda和pip安装与此有关，我假设BC我与它们有问题，并使用pip和conda运行不同的包。我还重新安装了dash_bootstrap_Components。有什么想法我应该怎么做吗？

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import pandas as pd
import dash_core_components as dcc
import plotly.figure_factory as ff
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

  app.layout = html.Div([
    html.Div(html.H6("Title"),
             style={"text-align": "Center"}),
    html.Hr(),
    html.H1("Sub-Title"),
    dbc.CardHeader(
        dbc.Button(
            "Completed",
            color="link",
            id="buttonCompleted",
        )
    ),
    dbc.Collapse(
        dbc.CardBody("Chart goes here if needed."),
        id="collapseCompleted", is_open=False
    ),

    dbc.CardHeader(
        dbc.Button(
            "In Progress",
            color="link",
            id="buttonInProgress",
        )
    ),
    dbc.Collapse(
        dbc.CardBody(html.Div([
            dbc.Row(html.Div([
                dbc.Col(html.Div( [
                    dcc.Graph(id='bullet-chart1', 
                        figure=ff.create_bullet(
                            data, titles="title",
                            ranges='ranges',
                            measures='measures',
                            title=None, autosize=True,
                            width=450, height=300,
                        ),  
                    ), 
                ]), 
                ),

                dbc.Col(html.Div([
                    dcc.Graph(id='bullet-chart2',
                        figure=ff.create_bullet(
                            data2, ranges='ranges',
                            measures='measures',
                            title=None, autosize=True,
                            width=450, height=300
                        )
                    ),
                ]), 
                ),
            ]),
            )
        ])),
        id="collapseInProgress", is_open=True
    ),

    dbc.CardHeader(
        dbc.Button(
            "Not Started",
            color="link",
            id="buttonNotStarted"
        )
    ),

    dbc.Collapse(
        dbc.CardBody("Chart goes here"),
        id="collapseNotStarted", is_open=False
    )
])

推荐答案

一切都很好，除了我在行外有第二个dbc.Col，并且必须将它放在dbc.Row中。我只是重写了它，并从一个基本的字符串开始，然后找出了为什么会发生这种情况。只需在括号上方添加一个，并在每个数据库中添加->；Align="；Start&Quot；，Align="；Center"；Align="；End&Quot；。

这篇关于我的数据库布局没有并排显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！