Python 3.x 柱之间的垂直线-绘制虚线

给出以下仪表板示例：

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[{"name": "viewport", "content": "width=device-width"}])

app.layout = html.Div(
        [
            dbc.Row(
                [
                    dbc.Col(html.P("Item 1")),
                    dbc.Col(html.P("Item 2")),
                    dbc.Col(html.P("Item 3")),
                ]
            ),
            dbc.Row(
                [
                    dbc.Col(html.P("Item 4")),
                    dbc.Col(html.P("Item 5")),
                    dbc.Col(html.P("Item 6")),

                ]
            ),

            dbc.Row(dbc.Col(html.P("Some more content..."))),
        ]
)

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

如何以以下方式在列之间添加可自定义的垂直线？

---

请注意，这些行跨越多行（此处为2）。谢谢

您可以添加自定义css，方法是向应用程序中添加资产文件夹，并添加带有以下内容的

style.css

文件（用于添加蓝色实线-根据需要进行自定义）

第二件事是在布局中分离列，如下所示：

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[{"name": "viewport", "content": "width=device-width"}])

leftside_col = dbc.Col([
    html.P("Item 1"),
    html.P("Item 4")
], className='column_left')

center_col = dbc.Col([
    html.P("Item 2"),
    html.P("Item 5")
], className='column_left')

rightside_col = dbc.Col([
    html.P("Item 3"),
    html.P("Item 6")
])
app.layout = html.Div([
            dbc.Container([
                dbc.Row([
                    leftside_col,
                    
                    center_col,
                    
                    rightside_col    
                ]),
                html.Hr(),
                dbc.Row(dbc.Col(html.P("Some more content...")))
            ]),
])

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

该应用程序看起来像：

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[{"name": "viewport", "content": "width=device-width"}])

leftside_col = dbc.Col([
    html.P("Item 1"),
    html.P("Item 4")
], className='column_left')

center_col = dbc.Col([
    html.P("Item 2"),
    html.P("Item 5")
], className='column_left')

rightside_col = dbc.Col([
    html.P("Item 3"),
    html.P("Item 6")
])
app.layout = html.Div([
            dbc.Container([
                dbc.Row([
                    leftside_col,
                    
                    center_col,
                    
                    rightside_col    
                ]),
                html.Hr(),
                dbc.Row(dbc.Col(html.P("Some more content...")))
            ]),
])

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