Dash导航栏渲染异常：样式未正确加载问题求助

核心问题 #

导航栏渲染异常、dbc.Row内的dbc.Col无法并排显示，本质是未加载Dash Bootstrap Components依赖的Bootstrap CSS样式表。Dash默认不包含Bootstrap样式，而dbc组件的布局、样式完全依赖Bootstrap框架的栅格系统、组件样式规则。

解决方案 #

初始化Dash应用时，指定external_stylesheets参数加载Bootstrap样式表，修改应用初始化代码：

# 替换原有的 app = dash.Dash()
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

修改后的完整代码 #

import dash
from dash import html
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])  # 关键修改

PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"

search_bar = dbc.Row(
    [
        dbc.Col(dbc.Input(type="search", placeholder="Search")),
        dbc.Col(
            dbc.Button(
                "Search", color="primary", className="ms-2", n_clicks=0
            ),
            width="auto",
        ),
    ],
    className="g-0 ms-auto flex-nowrap mt-3 mt-md-0",
    align="center",
)

navbar = dbc.Navbar(
    dbc.Container(
        [
            html.A(
                dbc.Row(
                    [
                        dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
                        dbc.Col(dbc.NavbarBrand("Navbar", className="ms-2")),
                    ],
                    align="center",
                    className="g-0",
                ),
                href="https://plotly.com",
                style={"textDecoration": "none"},
            ),
            dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
            dbc.Collapse(
                search_bar,
                id="navbar-collapse",
                is_open=False,
                navbar=True,
            ),
        ]
    ),
    color="dark",
    dark=True,
)


@app.callback(
    Output("navbar-collapse", "is_open"),
    [Input("navbar-toggler", "n_clicks")],
    [State("navbar-collapse", "is_open")],
)
def toggle_navbar_collapse(n, is_open):
    if n:
        return not is_open
    return is_open

app.layout = navbar
app.run_server(debug=True, use_reloader=False)

原理说明 #

• Bootstrap的栅格系统（row/col）需要对应CSS规则才能实现并排布局，缺少样式时col会默认垂直堆叠。
• dbc.Navbar的深色背景、组件间距、响应式折叠效果等，都依赖Bootstrap提供的类样式（如dark、flex-nowrap），未加载样式时这些类不会生效。

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