如何让Dash标签页横向并排显示而非堆叠在同一页面？

我尝试在Dash中添加两个可点击切换的横向并排标签页，按文档操作后标签页却堆叠在同一页面，不符合预期。

原代码 #

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

matchup_tab = html.Div([html.Div(html.H1("MLB Matchup Analysis", id="title", style={"textAlign":"center"}), className="row")])
hot_hitter_tab = html.H2("Header for hot hitter tab")

stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = Dash(__name__, external_stylesheets=stylesheets)
server = app.server

tabs = dbc.Tabs([dbc.Tab(matchup_tab, label="Matchup"), dbc.Tab(hot_hitter_tab, label="Hitter")])
app.layout = dbc.Row(dbc.Col(tabs))

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

当前效果 #

期望效果 #

问题原因与修复方案 #

问题根源是你使用的Codepen旧样式表bWLwgP.css与dash-bootstrap-components（dbc）的样式冲突，破坏了Tabs组件的横向布局逻辑。

修改后的代码 #

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

matchup_tab = html.Div([html.Div(html.H1("MLB Matchup Analysis", id="title", style={"textAlign":"center"}), className="row")])
hot_hitter_tab = html.H2("Header for hot hitter tab")

# 替换为Bootstrap官方样式，解决样式冲突
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server

tabs = dbc.Tabs([dbc.Tab(matchup_tab, label="Matchup"), dbc.Tab(hot_hitter_tab, label="Hitter")])
app.layout = dbc.Row(dbc.Col(tabs))

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

说明 #

• dbc组件依赖Bootstrap的样式系统，使用Codepen的旧样式会覆盖Tabs的原生布局样式，导致标签堆叠。
• 替换为dbc.themes.BOOTSTRAP后，dbc组件的样式会正常加载，标签页将自动横向排列并支持点击切换功能。

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