dash-bootstrap-components 中未正确反映行高设置

Question

我想使用 dash-bootstrap-components 更改行高，但它没有正确反映在页面上。

具体来说，即使我执行下面发布的代码，我也会看到如下页面。

不过页面的简单结构如下

整页：高度为视点的95%，背景颜色为灰色
第一行：html.H1、className="h-10"
第 2 行：html.Div、className="h-40"
第 3 行：html.Div、className="h-40"

在代码中，页面的整体大小设置为视图点的95%，背景色设置为灰色，如下图所示。

带“标题”的H1元素也是总尺寸的10%(className="h-10")，完全符合设置，但第二行及以后的行的高度不符合设置。

一开始看到下面的讨论，我想我的代码也是这样实现的。 https://github.com/facultyai/dash-bootstrap-components/issues/286

这些都没有通过刷新页面或重新启动服务器来解决。如何获得每一行的高度以反映我指定的大小？

谢谢。

这是我的源代码

import dash
import dash_bootstrap_components as dbc
from dash import html, dcc
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Input, Output


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Row(
            dbc.Col(
                html.H1("タイトル"),
                width=12,
                style={"height": "100%", "background-color": "pink"},
            ),
            className="h-10"
        ),
        dbc.Row(
            [
                dbc.Col(
                    html.Div("This is column 1"),
                    width=8,
                    style={"height": "100%", "background-color": "red"},
                ),
                dbc.Col(
                    html.Div("This is column 2"),
                    width=4,
                    style={"height": "100%", "background-color": "green"},
                ),
            ],
            className="h-40",
        ),
        dbc.Row(
            [
                dbc.Col(
                    html.Div("This is column 3"),
                    width=8,
                    style={"height": "100%", "background-color": "blue"},
                ),
                dbc.Col(
                    html.Div("This is column 4"),
                    width=4,
                    style={"height": "100%", "background-color": "cyan"},
                ),
            ],
            className="h-40",
        ),
    ],
    style={"height": "95vh", "background-color": "grey"},
)

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

Answer 1

Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

https://getbootstrap.com/docs/4.1/utilities/sizing/

所以您指定的尺寸（例如：h-40 默认不支持）。

您可以使用 style 属性或通过 css 文件简单地将每行的高度设置为百分比，不需要实用程序函数

dbc.Row(
  dbc.Col(
    html.H1("タイトル"),
    width=12,
    style={"height": "100%", "background-color": "pink"},
  ),
  style={"height": "10%"}
),

dash-bootstrap-components 中未正确反映行高设置

Row height setting is not reflected correctly in dash-bootstrap-components

python-3.x

plotly-dash