Plotly Dash下拉菜单顶部标题设置及并排布局异常修复

算力阿峰

2026-8-28

问题根因

组件纵向堆叠是三个写法问题导致的：

下拉菜单标题、下拉选择器被拆成了两个独立的dbc.Row行组件。Bootstrap栅格体系里的行默认是块级元素，会自动占满整行宽度触发换行，直接把标题和下拉选择器拆成上下堆叠的两层
初始化Dash应用时没有加载Bootstrap样式表，dbc.Row/dbc.Col的栅格排布规则完全不生效
控制栏和图表区之间插入的output_container空Div没有做间距适配，会进一步挤压上下区块造成错位

修正方案

核心逻辑是把同组的「下拉标题+下拉选择器」打包放进同一个列容器，左右两列各放一组控制组件，两个图表也对应放在左右列，同层级需要横向排布的元素统一放到同一个行容器里。修正后的可运行代码如下：

import pandas as pd
import dash
from dash import dcc, html
import dash_bootstrap_components as dbc

# 沿用原有测试数据
df_run_data = pd.DataFrame({'Hermes': {0: 'H11433-21', 1: 'H11433-21', 2: 'H11433-21', 3: 'H11433-21', 4: 'H11433-21', 5: 'H11433-21', 6: 'H11433-21', 7: 'H11433-22', 8: 'H11433-22', 9: 'H11433-22', 10: 'H11433-22', 11: 'H11433-22', 12: 'H11433-22', 13: 'H11433-22'}, 'Time': {0: 0.28, 1: 23.36, 2: 46.84, 3: 70.88, 4: 95.09, 5: 118.03, 6: 143.49, 7: 0.28, 8: 23.36, 9: 46.84, 10: 70.88, 11: 95.09, 12: 118.03, 13: 143.49}, 'Sample Type': {0: 'Broth', 1: 'Broth', 2: 'Broth', 3: 'Broth', 4: 'Broth', 5: 'Broth', 6: 'Broth', 7: 'Broth', 8: 'Broth', 9: 'Broth', 10: 'Broth', 11: 'Broth', 12: 'Broth', 13: 'Broth'}, 'Tank Weight Pre kg': {0: 0.249, 1: 0.254, 2: 0.318, 3: 0.389, 4: 0.383, 5: 0.354, 6: 0.356, 7: 0.249, 8: 0.254, 9: 0.318, 10: 0.389, 11: 0.383, 12: 0.354, 13: 0.356}, 'Tank Weight Post kg': {0: 0.243, 1: 0.235, 2: 0.249, 3: 0.251, 4: 0.25, 5: 0.25, 6: 0.277, 7: 0.243, 8: 0.235, 9: 0.249, 10: 0.251, 11: 0.25, 12: 0.25, 13: 0.277}})
runs = df_run_data.Hermes.unique()
headers = list(df_run_data.columns.values)  

# 关键：初始化app时必须加载Bootstrap样式表，否则栅格布局不生效
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    # 顶部通栏标题
    dbc.Row([
        dbc.Col(html.H1('Nitrogen Balance', style={'text-align': 'center'}), width=12)
    ], className='mb-4'),

    # 控制区：左右两列各放一组「标题+下拉选择器」
    dbc.Row([
        # 左列：运行批次选择
        dbc.Col([
            html.Label('Select Run', style={'font-weight': 'bold', 'font-size': 20, 'margin-bottom': '8px'}),
            dcc.Dropdown(id='Hermes', options=[{'label': i, 'value': i} for i in runs], value=None, multi=True)
        ], width=6, className='ps-4 pe-4'),
        # 右列：绘图字段选择（修正原代码两个下拉标题重复的笔误）
        dbc.Col([
            html.Label('Select Columns', style={'font-weight': 'bold', 'font-size': 20, 'margin-bottom': '8px'}),
            dcc.Dropdown(id='Columns', options=[{'label': i, 'value': i} for i in headers], value=None, multi=True)
        ], width=6, className='ps-4 pe-4')
    ], className='mb-4'),

    # 输出提示容器
    html.Div(id='output_container', children=[], className='mb-3'),

    # 图表区：左右两列各放一个绘图组件
    dbc.Row([
        dbc.Col([dcc.Graph(id='balance', figure={})], width=6),
        dbc.Col([dcc.Graph(id='balance1', figure={})], width=6)
    ])
], className='container-fluid p-4')

if __name__ == '__main__':
    app.run_server(debug=True)

注意事项

代码里添加的mb-*/p-*/ps-*/pe-*是Bootstrap自带的间距类，用来避免组件贴边、挤在一起，不需要额外写内联样式控制边距
最外层Div加container-fluid类可以让栅格布局自动适配浏览器宽度，不会出现内容挤在页面一侧的问题
如果需要调整列宽占比，直接修改dbc.Col的width参数即可，Bootstrap默认12栅格，width=6就是左右各占一半宽度。

原异常布局效果参考：

内容的提问来源于stack exchange，提问作者wew044