如何修复我的 Plotly Dash 应用程序未正确组织

Question

我正在尝试将我的 Plotly Dash 仪表板组织成栏的部分，但我不明白我在这里做错了什么。我已将我的组件包含在一个 dbc.Row 中的单独 dbc.Cols 中，并指定了我希望它们占据的列的宽度，但所有内容都只是堆叠在一起。理想情况下，我会将卡片单独放在左侧的一栏中，然后将问题放在右侧。有人可以帮助我诊断我正在做什么导致我所有的组件堆叠吗？

#Import packages
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State



app = dash.Dash()

#App Layout
app.layout = html.Div([
    dbc.Row(children=[
                dbc.Col(id="card_col",width = 6),
                dbc.Col(id="form", width=6, children=[
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Question 1"),
                            dbc.Col(
                                dcc.Input(type="text", id="q1", placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div(children=[
                        dbc.FormGroup(children=[
                            dbc.Label("Question 2?"),
                            dbc.Col(
                                dbc.Input(type="text",id="q2",placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Yes/No?"),
                            dbc.Col(
                                dbc.RadioItems(id="q3",options=[{"label": "Yes", "value": 1},
                                                                {"label": "No", "value": 2}
                                                               ]
                                              ),width=6
                            )
                        ],row=True)

                    ]),
                    html.Br(),
                    html.Div([
                        html.Button(id='submit-button',
                            n_clicks=0,
                            children='Submit Query',
                            style={'fontSize':24})

                    ])

                ]) #End of second column
                ]), #End of row,
    dbc.Row(
        html.Div([
            dcc.Graph(id='graph1')
        ])
    
    )
    

])


@app.callback(
    Output('card_col','children'),
    Input('submit-button','n_clicks'),
    State('q1','value'),
    State('q2','value'),
    State('q3','value'))
def update_cards(n_clicks,input1,input2,input3):
    
    card1 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input1}", className="card-title"),
            html.P(f"{input1} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])
        
    card2 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input2}", className="card-title"),
            html.P(f"{input2} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])
    
    card3 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input3}", className="card-title"),
            html.P(f"{input3} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])    
        
    return (card1, card2, card3)
    

if __name__ == "__main__":
    app.run_server()

Answer 1

您还没有包含 bootstrap 样式：

Linking a stylesheet dash-bootstrap-components doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself.

In Python, each CDN link is available within the dbc.themes submodule and can be used when instantiating the app object.

https://dash-bootstrap-components.opensource.faculty.ai/docs/quickstart/

所以不是这个：

app = dash.Dash()

这样做：

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

如何修复我的 Plotly Dash 应用程序未正确组织

How to Fix My Plotly Dash App Not Organizing Properly

html

python

layout

plotly

plotly-dash