Plotly图表无法与组件横向排列：dbc Row表现同Col一致

我使用Dash、Plotly和Dash Bootstrap Components（dbc）构建数据探索器，期望实现图表与滑块控件横向排列的布局，但实际渲染时图表始终显示在所有控件上方。

复现代码 #

sliders = dbc.Col(children=[
    'Iteration',
    dcc.Slider(id='iteration',min=0,max=1),
    'Frequency',
    dcc.Slider(id='frequency',min=0,max=1),
    'Depth log10(km)',
    dcc.Slider(id='depth',min=0,max=1),
    'Northing',
    dcc.Slider(id='north',min=0,max=1),
    'Easting',
    dcc.Slider(id='east',min=0,max=1),
    'Conductivity log10(km)',
    dcc.Slider(id='conductivity',min=0,max=1)])

controls = dbc.Col(children=[sliders],style={'width':'500px','borderWidth': '20px'})


app.layout = dbc.Container(children=[
        dbc.Row(children=[dbc.Col(dcc.Graph()),controls]),
    ],
    fluid=False)

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

使用版本 #

• Python: 3.10.10
• Plotly: 5.14.0
• Dash: 2.9.2
• Dash Bootstrap Components: 1.4.1

问题根源是多余的Col嵌套：你把sliders这个dbc.Col又嵌套进了另一个dbc.Col（controls），导致Row中的第二个Col内部存在Col元素，破坏了Bootstrap栅格的横向排列逻辑。同时，未明确指定Col的宽度比例，也会导致布局不可控。

修正后的代码 #

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

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

sliders = [
    'Iteration',
    dcc.Slider(id='iteration', min=0, max=1),
    'Frequency',
    dcc.Slider(id='frequency', min=0, max=1),
    'Depth log10(km)',
    dcc.Slider(id='depth', min=0, max=1),
    'Northing',
    dcc.Slider(id='north', min=0, max=1),
    'Easting',
    dcc.Slider(id='east', min=0, max=1),
    'Conductivity log10(km)',
    dcc.Slider(id='conductivity', min=0, max=1)
]

# 直接用一个Col包裹滑块，无需嵌套
controls = dbc.Col(sliders, style={'borderWidth': '20px'}, width=4)

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                # 给图表Col分配8份宽度（Bootstrap栅格共12份）
                dbc.Col(dcc.Graph(), width=8),
                controls
            ]
        )
    ],
    fluid=False
)

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

关键修改点 #

1. 移除多余的Col嵌套：将sliders从Col改为普通列表，直接作为controls这个Col的子元素
2. 利用Bootstrap 12栅格系统：给两个Col分别指定width=8和width=4，明确分配横向空间（总和为12，符合栅格规则）
3. 保留原有的样式设置，同时让布局逻辑更清晰

补充说明 #

如果需要响应式布局（不同屏幕宽度下自动调整），可以用md=8和md=4替代width，这样在中等及以上屏幕横向排列，小屏幕自动堆叠。

内容的提问来源于stack exchange，提问作者K. A. Mendoza