如何在Plotly Dash与DBC中实现列元素并排对齐布局？

列布局无法并排是硬编码样式和代码笔误共同导致的：

• 两个dcc.Graph都写死了width: '75vh'的固定宽度：单个图表宽度就占视口高度的75%，两个加起来宽度远超单行列容器的最大可用宽度，Bootstrap栅格无法在单行容纳两个超宽元素，自然强制折行堆叠。
• 代码开头有粘贴时带进来的冗余图片标记字符，会干扰布局解析逻辑。
• 没有给dbc.Col指定明确的栅格占比，内容超宽时栅格系统无法正常分配列宽。
• 下拉选择框硬编码的width: "50%"属于冗余样式，会打破栅格的自适应排版流。

按照Dash Bootstrap Components的栅格规则调整即可：

1. 删除开头冗余的错误字符，修正app.layout写法
2. 移除所有图表、下拉框上硬编码的固定width样式，让组件自动适配所在列的宽度，仅保留需要的height设置
3. 给同一行的两个dbc.Col设置width=6，即各占单行50%宽度，刚好实现并排
4. （可选）可以给列加响应式宽度参数，实现小屏自动堆叠、大屏并排的效果

修复后的可运行代码如下：

import dash
import dash_bootstrap_components as dbc
from dash import dcc, html
# 原有初始化app、定义fig2的逻辑保留即可，注意初始化app时必须加载dbc样式表
# app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    # 第一行：两个并排列
    dbc.Row([
        # 第一列
        dbc.Col([
            html.Label(['Full Chart']),
            dcc.Dropdown(
                id='my_dropdown',
                options=[
                         {'label': 'Price', 'value': 'Price'},
                         {'label': 'Volume', 'value': 'Volume'},
                         {'label': 'Positive Tweets', 'value': 'Positive Tweets'},
                         {'label': 'Negative Tweets', 'value': 'Negative Tweets'},
                         {'label': 'Neutral Tweets', 'value': 'Neutral Tweets'},
                         {'label': 'Total Number of Tweets', 'value': 'Total Number of Tweets'}
                ],
                value=['Price'],
                multi=True,
                clearable=False
            ),
            dcc.Graph(id='the_graph', style={'height': '45vh'})
        ], width=6),
        # 第二列
        dbc.Col([
            dcc.Graph(figure=fig2, style={'height': '45vh'})
        ], width=6)
    ]),
    
    html.Br(),
    # 第二行：单列内容
    dbc.Row([
        dbc.Col([
            dcc.Tabs([
                dcc.Tab(label = "Tab One", children = [dcc.Graph(figure=fig2, style={'height': '45vh'})]),
                dcc.Tab(label = "Tab Two", children= [dcc.Graph(figure=fig2, style={'height': '45vh'})])
            ])
        ], xxl=True)
    ])
])

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

注意：用dbc做布局时，尽量不要给内部的图表、表单组件硬编码固定宽度，宽度分配交给dbc.Col的栅格参数控制，高度可以根据需求自行设置，就不会出现布局错乱堆叠的问题。如果需要做响应式适配，可以把列宽写成lg=6, md=12，对应大屏（≥992px）下各占一半并排，中屏及以下自动变成上下堆叠。

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