Dash布局问题：Width参数失效，dbc.Column无法横向排列图表

问题原因 #

1. 栅格宽度设置错误：Bootstrap栅格系统采用12列布局，你给两个dbc.Col都设置了width=12，意味着每个列都会占满整行宽度，自然会自动换行。
2. 缺少Bootstrap样式依赖：初始化Dash应用时未引入Dash Bootstrap Components的官方样式表，导致栅格布局规则无法生效。

修改后的完整代码 #

import pandas as pd
import dash
from dash import dcc, html, Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px

# 示例数据
data_dict = {
    'date': ['2024-05-14', '2024-05-14', '2024-05-14', '2024-05-15','2024-05-15','2024-05-15'],
    'time': ['12:00', '12:10', '12:20', '12:00', '12:10', '12:20'],
    'temperature': [25, 26, 27, 20, 22, 28],
    'humidity': [50, 55, 50, 60, 78, 77]
}
data = pd.DataFrame(data_dict)

# 引入Bootstrap样式表，确保布局生效
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    html.H1('Weather Dashboard'),
    
    dbc.Row([
        dbc.Col([
            dcc.Dropdown(
                id='date-dropdown',
                options=[{'label': date, 'value': date} for date in data['date'].unique()],
                value=data['date'].unique()[0]
            )
        ], width=4)
    ]),
    
    # 修改两个Col的width，总和为12即可实现横向排列
    dbc.Row([
        dbc.Col([
            dcc.Graph(id='temp-graph-plotly', figure={})
        ], width=6),
        
        dbc.Col([
            dcc.Graph(id='hum-graph-plotly', figure={})
        ], width=6)
    ])
])

@app.callback(
    Output('temp-graph-plotly', 'figure'),
    Output('hum-graph-plotly', 'figure'),
    Input('date-dropdown', 'value')
)
def update_graph(selected_date):
    filtered_data = data[data['date'] == selected_date]
    
    fig_temp_plotly = px.line(filtered_data, x='time', y='temperature').update_xaxes(tickangle=300)
    fig_hum_plotly = px.line(filtered_data, x='time', y='humidity').update_xaxes(tickangle=300)
    
    return fig_temp_plotly, fig_hum_plotly

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

关键修改点 #

• 初始化应用时添加样式表：external_stylesheets=[dbc.themes.BOOTSTRAP]，这是Dash Bootstrap Components布局生效的前提。
• 调整列宽度：将两个图表所在的dbc.Col的width改为6（总和12），你也可以根据需求调整为其他比例，比如5和7，只要两个列的宽度之和不超过12即可。

内容的提问来源于stack exchange，提问作者D. Brito