如何为Bootstrap Offcanvas组件自定义CSS以调整侧边栏宽度

要调整Bootstrap Offcanvas收起状态下的宽度，你需要通过自定义CSS覆盖默认样式。以下是具体实现步骤和修改后的完整代码：

核心思路 #

Bootstrap左侧Offcanvas（offcanvas-start）默认收起时会完全滑出视野（通过transform: translateX(-100%)实现）。我们可以通过CSS修改这个规则，让收起状态下保留指定宽度，同时调整主内容区域的布局避免遮挡。

修改步骤 #

1. 添加自定义CSS样式：通过html.Style组件将样式嵌入到Dash应用中，针对offcanvas-start类的收起状态进行修改。
2. 调整Offcanvas的初始配置：确保Offcanvas使用placement="start"（左侧），移除无效的style={'horizontal-width': 10}属性。
3. 适配主内容区域：修改主内容列的边距，避免被收起状态的Offcanvas遮挡。

修改后的完整代码 #

from dash import Dash, html, dcc, Input, Output, State
import dash_bootstrap_components as dbc
from dash_iconify import DashIconify

app = Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.SPACELAB])

sidebar = dbc.Nav([
            dbc.NavLink([
                html.Div(page["name"], className="ms-2"),
            ],  href=page["path"],
                active="exact",
            )
            for page in dash.page_registry.values()
],  vertical=True,
    pills=True,
    className="bg-light",
)

download_icon = DashIconify(icon='ic:baseline-menu', width=40, style={})

app.layout = dbc.Container([
    # 自定义CSS样式
    html.Style("""
        /* 调整左侧Offcanvas收起状态的宽度 */
        .offcanvas-start.offcanvas.hide {
            transform: translateX(-calc(100% - 60px)); /* 收起后保留60px宽度 */
            visibility: visible; /* 保持可见，不隐藏 */
        }
        
        /* 自定义Offcanvas展开时的宽度（可选） */
        .offcanvas-start {
            width: 250px; /* 展开时的宽度，可按需修改 */
        }
        
        /* 调整主内容区域的左边距，避免被收起的Offcanvas遮挡 */
        .main-content {
            margin-left: 60px; /* 和收起状态保留的宽度一致 */
        }
        
        /* 确保Offcanvas层级正确，不被其他元素覆盖 */
        .offcanvas {
            z-index: 1050;
        }
    """),
    
    dbc.Row([
        dbc.Col(
            html.Div("Drilling Dashboard",
                style={'fontSize': 40,
                       'textAlign': 'center',
                       'color': 'white'}
            )
        ),
        dbc.Col([
            dbc.Button([download_icon, ''], id="open-offcanvas", n_clicks=0),
        ],  width=1,
            style={'margin-right': 0,
                   'padding': 5}
        ),
    ]),

    html.Hr(
        style={'margin-top': 0}
    ),

    dbc.Row([
        dbc.Offcanvas(
            sidebar,  # 直接传入sidebar，无需嵌套dbc.Col
            id="offcanvas", 
            title="Title", 
            is_open=False,
            placement="start",  # 指定左侧位置
            className="bg-light"
        ),
    ]),

    dbc.Row([
        dbc.Col([dash.page_container], className="main-content")  # 添加自定义类适配边距
    ])
], fluid=True,
    style={'background-color': 'black'})


@app.callback(
    Output("offcanvas", "is_open"),
    Input("open-offcanvas", "n_clicks"),
    [State("offcanvas", "is_open")],
)
def toggle_offcanvas(n1, is_open):
    if n1:
        return not is_open
    return is_open

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

关键样式说明 #

• .offcanvas-start.offcanvas.hide：匹配收起状态的左侧Offcanvas，通过transform计算让元素收起后保留指定宽度，visibility: visible确保元素不被完全隐藏。
• .offcanvas-start：自定义Offcanvas展开时的宽度，默认值为300px，可按需修改。
• .main-content：主内容区域的左边距需和收起状态保留的宽度一致，避免内容被遮挡。

你可以根据需求修改60px和250px这两个数值，调整收起和展开状态的宽度。

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