dash_bootstrap_components 列和行未按预期显示 - 只是堆叠每个项目

Question

我正在尝试构建我的第一个 dash 应用程序并想使用 dbc.Col 和 dbc.Row 来组织事物。我正在尝试在名为“股票风险”的第一个选项卡部分中构建看起来像这样的东西...

basic layout i'm aiming for

不幸的是，第一个选项卡上返回的所有内容都是 3 个垂直堆叠的项目，每个项目都占据了屏幕的整个宽度。

到目前为止，这是我的代码 - 我不确定这是否足以诊断问题，但希望是这样。我仔细检查了 brackets/parenthesis，为每一列添加了宽度参数，并用谷歌搜索了类似的东西，但仍然无法判断出什么问题。任何帮助将不胜感激！

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
auth = dash_auth.BasicAuth(app,USERNAME_PASSWORD_PAIRS)
server = app.server

# app layout
app.layout = html.Div([
        # header banner with titles
        html.Div(
            children=[
                html.H1('COMPANY NAME',
                        className="header-company-name"),
                html.P('HISTORICAL EARNINGS SPREAD ANALYSIS', #'Historical earnings spread analysis',
                       className='header-page-name')
            ],
            className="header-banner"
        ),
        dcc.Tabs([
            # THIS IS THE TAB THAT I'M TRYING TO ORGANIZE, BUT HAVE PROBLEMS WITH
            dcc.Tab(label='Equity Risk', children=[
                dbc.Container([
                    dbc.Row([
                        dbc.Col([
                            dbc.Row([
                                dbc.Col([
                                    # user inputs and submit button
                                    html.Div([
                                        html.Div([
                                            html.Div(children='User inputs',
                                                    className='block-title'),
                                            html.Div(children='', className='title-line'),
                                            html.Div(children='Enter a start and end date:',
                                                    className='input-title'),
                                            dcc.DatePickerRange(id='my_date_range',
                                                                min_date_allowed=df.date.min(),
                                                                max_date_allowed=df.date.max(),
                                                                start_date=datetime(2007,1,1),
                                                                end_date=datetime.today()
                                                                )
                                            ],
                                        ),
                                        html.Div(
                                            children=[
                                                html.Button(id='submit_button',
                                                            n_clicks=0,
                                                            children='Submit Inputs',
                                                            className='button')
                                            ],
                                        )
                                    ],
                                    # style={'width': '20%', 'display': 'inline-block', 'verticalAlign':'top'},
                                    className='utilities-block'
                                    )
                                ], width=3)
                            ]),
                            dbc.Row([
                                dbc.Col([
                                    # checkbox
                                    html.Div(
                                        children=[
                                            html.Div(children='Plot Adjustments',
                                                     className='block-title'),
                                            html.Div(children='', className='title-line'),
                                            dcc.RadioItems(id='plot_lines',
                                                           options=[
                                                              {'label':'Show mean and \u03C3 lines', 'value':'meanstd'},
                                                              {'label':'Show standard grid', 'value':'grid'}
                                                          ],
                                                           value='meanstd',
                                                           labelStyle={'display':'block'},
                                                           inputClassName='radio-input',
                                                           labelClassName='radio-label')
                                        ],
                                        # style={'width': '20%'},
                                        className='utilities-block'
                                    )
                                ], width=3)
                            ])
                        ], width=3),
                        dbc.Col([
                            # graph
                            html.Div(
                                children=[
                                    html.Div(children='Equity risk premium mainly between 15yr mean and -1\u03C3 in recent months',
                                             className='block-title'),
                                    html.Div(children='', className='title-line'),
                                    dcc.Graph(id='my_graph',
                                              figure=updated_figure,
                                              style={'height': '83%'},
                                              className='content-block')
                                    ],
                                # style={'width': '72%', 'display': 'inline-block', 'verticalAlign':'top', 'height':'450px'},
                                className='utilities-block'
                            )
                        ], width=9)
                    ]) # end of row
                ], fluid=True)
            ], style=tab_style, selected_style=tab_selected_style),

            # IGNORE THIS TAB.. I HAVEN'T STARTED DOING ANY GRID LAYOUT YET
            dcc.Tab(label='S&P vs P/E Ratio', children = [
               html.Div(
                   children=[
                       html.Div(children='Spread between S&P price and P/E ratio is widening',
                                className='block-title'),
                       html.Div(children='', className='title-line'),
                       dcc.Graph(id='my_sp_pe_graph',
                                 figure=sp_pe_figure,
                                 style={'height': '90%'},
                                 className='content-block')
                   ],
                   style={'width': '75%', 'display': 'inline-block', 'verticalAlign': 'top', 'height': '550px',
                          'paddingLeft': '20px'},
                   className='utilities-block'
               )
            ], style=tab_style, selected_style=tab_selected_style),
            # dcc.Tab(label='Something Else', style=tab_style, selected_style=tab_selected_style)
    ], style=tabs_style)
])

Answer 1

问题是由某些 Col 元素的小 width 值引起的。没有足够的水平空间 space 将元素并排放置，这会导致元素堆叠。

基本上发生的事情是第一个选项卡中布局的左侧部分的列宽为 3，然后实际内容位于列元素内，这些元素也设置了 width至 3。如果你检查这部分布局，你会发现这个容器的宽度非常小；宽度是行宽的 1/16。

因此解决方案是要么将最里面的列的宽度设置为 12，要么只使用常规的 div，因为最外面的列已经只占用 1/4行宽。

dash_bootstrap_components 列和行未按预期显示 - 只是堆叠每个项目

dash_bootstrap_components Col and Row not showing as expected - just stacking each item

plotly-dash

dash-bootstrap-components