在不使用引导程序主题的情况下使用 dbc.Col & dbc.Row 绘制破折号网格布局

Question

是否可以使用 dbc.Col 和 dbc.Row 函数来设置网格布局而使用 bootstrap 主题？

例如添加 codepen.io css 样式表时，即使在指定行和列时，它也会显示垂直堆叠的所有内容。

不使用 dbc 主题的原因是我想个性化一个外部样式表并使用它。如果没有办法解决，是否可以覆盖 dbc 主题？或修改它们？

import dash 
from dash import html
from dash import dcc
import dash_bootstrap_components

app = dash.Dash(__name__, external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.H5('row 1, col 1')),
        dbc.Col(html.H5('row 1, col 2'))
    ]),
    dbc.Row([
        dbc.Col(html.H5('row 2, col 1')),
        dbc.Col(html.H5('row 2, col 2'))
    ])
], fluid=True)


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

它这样显示：

row 1, col 1
row 1, col 2
row 2, col 1
row 2, col 2

谢谢！

Answer 1

dbc.themes.BOOTSTRAP 只是 link 到 css 样式表

>>> print(dbc.themes.BOOTSTRAP)
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css

所以不用传递 dbc.themes.BOOTSTRAP 你可以传递

"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css"

到 external_stylesheets 以仅获取网格系统和 flex 实用程序。

https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

您还可以转到 bootstrap 网格样式的非缩小版本

https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.css

并将其复制粘贴到 assets 文件夹中的 css 文件中，然后您可以根据需要对其进行修改。有关详细信息，请参阅文档 here。

在不使用引导程序主题的情况下使用 dbc.Col & dbc.Row 绘制破折号网格布局

Plotly dash grid layout using dbc.Col & dbc.Row without the use of the bootstraps themes

grid

layout

themes

plotly-dash

dash-bootstrap-components