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

Posted 2023-03-17

【中文标题】在不使用引导主题的情况下使用 dbc.Col 和 dbc.Row 绘制破折号网格布局

【英文标题】：Plotly dash grid layout using dbc.Col & dbc.Row without the use of the bootstraps themes

【发布时间】：2021-12-03 00:50:03

【问题描述】：

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

当添加例如 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

谢谢！

【参考方案1】：

dbc.themes.BOOTSTRAP 只是一个 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 只获取网格系统和弹性实用程序。

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

---

您也可以转到引导网格样式的非缩小版本

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

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