不使用Bootstrap主题时能否用dbc.Row、dbc.Col实现Dash网格布局

1. 能否不使用Bootstrap主题直接用dbc.Row、dbc.Col搭建网格？ #

不能。dash-bootstrap-components（简称dbc）的所有组件类名、样式规则均基于Bootstrap框架设计，dbc.Row和dbc.Col依赖Bootstrap栅格系统的内置CSS才能实现多列并排布局。你当前引入的bWLwgP.css是Dash原生的基础样式表，没有包含Bootstrap栅格对应的样式规则，因此所有列元素都会默认占满整行，呈现垂直堆叠的效果。

2. 如何自定义dbc主题实现个性化样式？ #

不需要完全放弃Bootstrap主题，支持两种自定义方案，均可以保留网格布局能力同时实现个性化：

• 方案1：引入自定义编译的Bootstrap样式表
  你可以基于Bootstrap源码修改全局变量（比如主色、边距、圆角等），编译成自定义CSS文件后，直接替换external_stylesheets中的配置即可，不需要引入dbc自带的默认主题。
• 方案2：在dbc主题后叠加自定义CSS样式
  先引入dbc官方主题，再引入你自己写的自定义CSS文件，利用CSS优先级规则覆盖默认样式。自定义样式的加载顺序要放在Bootstrap主题之后，才能保证覆盖生效。

修正后的示例代码 #

import dash 
from dash import html
import dash_bootstrap_components as dbc # 注意要定义别名dbc

# 先引入Bootstrap基础主题，再引入自定义样式表
app = dash.Dash(__name__, external_stylesheets=[
    dbc.themes.BOOTSTRAP,
    "你的自定义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)

如果你需要对特定的行、列做个性化修改，直接给对应组件添加className属性，在自定义CSS中写对应类的样式规则即可，不会影响全局栅格的布局逻辑。

内容的提问来源于stack exchange，提问作者rubyOnSails