如何在Python3的Dash框架中为dbc.Card部分区域添加横向滚动条

调整方案 #

• 将每行拆分为固定宽度的标签列和可横向滚动的输入区域列，滚动属性仅作用在输入区域，避免标签被卷入滚动范围
• 为输入项设置固定最小宽度，同时给输入区域的行设置flex-nowrap属性，强制输入项不换行、不被栅格规则挤压宽度

完整可运行代码 #

import dash
from dash import html
import dash_bootstrap_components as dbc

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

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                html.H4('Card Header', className='p-3'),
                # 第一行
                dbc.Row([
                    # 固定宽度标签列
                    dbc.Col([dbc.Label('Row 1')], width=1, className='ps-3'),
                    # 可滚动的输入区域
                    dbc.Col([
                        dbc.Row([
                            *[dbc.Col(dbc.Input(placeholder='123.123', style={'min-width': '80px'})) for _ in range(20)]
                        ], className='flex-nowrap gx-2')
                    ], style={'overflow-x': 'scroll'})
                ], className='mb-3'),
                # 第二行
                dbc.Row([
                    # 固定宽度标签列
                    dbc.Col([dbc.Label('Row 2')], width=1, className='ps-3'),
                    # 可滚动的输入区域
                    dbc.Col([
                        dbc.Row([
                            *[dbc.Col(dbc.Input(placeholder='123.123', style={'min-width': '80px'})) for _ in range(20)]
                        ], className='flex-nowrap gx-2')
                    ], style={'overflow-x': 'scroll'})
                ], className='mb-3')
            ])
        ])
    ])
])

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

核心调整说明 #

• 标签列用width=1固定栅格宽度，可根据标签长度调整该值，也可以直接用style设置固定像素宽度
• 输入区域的行加flex-nowrap类，强制所有输入项在同一行展示，不会自动换行
• 每个输入框设置min-width:80px，足够容纳6位数字加边距，可按需调整该值
• gx-2类用于设置输入项之间的水平间距，避免元素过于紧凑
• 滚动属性仅加在输入区域的Col上，标签列始终固定在左侧不会随滚动位移

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