【问题标题】:Plotly dash grid layout using dbc.Col & dbc.Row without the use of the bootstraps themes在不使用引导主题的情况下使用 dbc.Col 和 dbc.Row 绘制破折号网格布局
【发布时间】:2021-12-03 00:50:03
【问题描述】:

是否可以使用dbc.Coldbc.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

谢谢!

【问题讨论】:

    标签: layout grid themes plotly-dash dash-bootstrap-components


    【解决方案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

    【讨论】:

      猜你喜欢
      • 2021-12-18
      • 2019-10-17
      • 2015-05-05
      • 1970-01-01
      • 2019-06-09
      • 2011-12-29
      • 1970-01-01
      • 2012-06-18
      • 2021-10-29
      相关资源
      最近更新 更多