在 dbc 清单中插入空格并换行文本 - 破折号

Question

我正在尝试增加 dbc 清单中图标和文本之间的边距。默认设置在文本和图标之间没有空格。尝试插入页边距时，输出的文本位于图标下方，文本进入图形。是否可以将文本向上移动与图标一致并将文本换行以便它在多行上运行？

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

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets,suppress_callback_exceptions=True)

values = ['orange', 'black', 'purple', 'red', 'brown', 'yellow']
options = []

for i in values: 
    options.append({'label': html.Div(i, style={"display": "inline", 'font-size': 15, 'color':'white', "padding-left":"0.5rem"}), 'value': i})


cat_filter_box = html.Div(children=[
    html.Div(children=[

        html.Label('Nav Bar', style = {'color':'white'}),
        dcc.Checklist(
            options = options,
            value = values,
            labelStyle = {"margin":"1rem"}, 
            style = {'display': 'flex'},
        ),

    ], className = "vstack gap-1 h-50",
    style = {'padding':'2rem'}
    )
])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div(cat_filter_box, className = "bg-secondary h-100"), width = 2),
        dbc.Col([
            dbc.Row([
                dbc.Col(dcc.Graph()),
            ]),
        ], width = 5),
        dbc.Col([
            dbc.Row([
                dbc.Col(dcc.Graph()),
            ]),
        ], width = 5),
    ])
], fluid = True)


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

Answer 1

我还是 Dash 的新手，但是如果我将 flex 设置为 labelstyle 并禁用复选框样式，我会得到预期的结果。

cat_filter_box = html.Div(children=[
    html.Div(children=[

        html.Label('Nav Bar', style = {'color':'white'}),
        dcc.Checklist(
            options = options,
            value = values,
            labelStyle = {"margin":"1rem", 'display': 'flex'}, 
            #style = {'display': 'flex'},
        ),

    ], className = "vstack gap-1 h-50",
    style = {'padding':'2rem'}
    )
])