Dash 使用本地 bootstrap 样式表更改行为

Question

我已经从 bootswatch 下载了 bootstrap 主题 css 样式表并将其放在我的应用程序的资产文件夹中。当我在样式表中进行微小更改（例如增加字体大小）时，该应用程序能够找到样式表，这会显示在我的应用程序中。

现在我发现 bootstrap 主题在更改为本地样式表后并非所有部分都可以正常工作：

当我使用同一主题的外部样式表时，复选框菜单似乎与之前显示的不同
CardDecks 现在垂直显示而不是水平显示

我是否遗漏了 bootstrap 布局的一部分？我使用的样式表是从 here.

复制的

Answer 1

我认为问题不在于您包含样式的方式，而在于样式本身（不同版本）。

似乎与 the Bootswatch v5.0.1 stylesheet you linked 和一些破折号 bootstrap 组件（平淡）样式不兼容。

让我们看一下 dash bootstrap 组件可用的样式：

import dash_bootstrap_components as dbc

# Find themes available through dash_bootstrap_components
print(dir(dbc.themes)) # ['BOOTSTRAP', 'CERULEAN', 'COSMO', 'CYBORG', 'DARKLY', 'FLATLY', 'GRID', 'JOURNAL', 'LITERA', 'LUMEN', 'LUX', 'MATERIA', 'MINTY', 'PULSE', 'SANDSTONE', 'SIMPLEX', 'SKETCHY', 'SLATE', 'SOLAR', 'SPACELAB', 'SUPERHERO', 'UNITED', 'YETI', '_BOOTSWATCH_BASE', '__builtins__', '__cached__', '__doc__', '__file__', '__loader__', '__name__', '__package__', '__spec__']

# Find FLATLY theme url
print(dbc.themes.FLATLY) # https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/flatly/bootstrap.min.css

app = Dash(__name__, external_stylesheets=[dbc.themes.FLATLY])

所以 dash bootstrap 组件版本 0.12.0 与 bootswatch 直接版本 4.5.2 一起工作（很可能还有其他版本，但我只测试了这些版本）。

我比较了 5.0.1 和 4.5.2 样式之间的差异，发现 5.0.1 版本没有任何 .card-deck 样式，但是 4.5.2 版本，这解释了 CardDeck 组件看起来不正确。

我建议您只使用 dbc.themes.FLATLY 主题以确保与 bootstrap 破折号组件的兼容性，并根据需要添加额外的样式。

重申一下，问题不是由在 assets 目录而不是 external_stylesheets 中使用本地样式表引起的。这两种方法都有效。选择您喜欢的任何方法。

Dash 使用本地 bootstrap 样式表更改行为

Dash using local bootstrap stylesheet changes behavior

css

python

bootstrap-4

plotly-dash