Dash Bootstrap: 列布局问题

Question

上周我了解了 Dash，我立即对开发一个小工具产生了兴趣，它可以在我的组织中执行和帮助可视化一些技术计算。由于其技术性质，此应用程序将有许多输入字段和按钮。我了解了 Dash Bootstrap 组件，在我看来，这应该可以更容易地将所有这些组织成一个整洁的网格。

问题是列定位似乎对我不起作用。我在以下位置https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/阅读了指南，这使得定位看起来非常容易。只要宽度总和不超过 12，列就应该很好地 space 并且不会换行到下一行。不幸的是，我遇到了一些意外行为（我在下面的图像和脚本中演示了两个奇怪行为的示例）。

1：在右上角的行中，最后一列换行到下一行。 2: 在右下角的行中，最后一列结束在中间列的顶部。

请注意，我并未在此脚本中明确加载 .css。我在离线工作。我使用的解决方法是下载本来会加载的 .css 并将其放在 'assets' 文件夹中。我尝试了多个 Dash Bootstrap Component .css 文件（这里我使用 bootstrap-grid.min.css，否则会使用对 external_stylesheets 的调用来加载dbc.themes.GRID)，但问题总是一样的。这个问题可能取决于屏幕尺寸（尽管我认为只要宽度加起来不超过 12 就应该不会出现这种情况）。

我找了好久的解决方案，也测试了很多，但都没有成功。如果有比我更有经验的人能够帮助我，我将不胜感激。谢谢！

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc

#Developing offline, therefore I have to use a local .css from dash boostrap which I placed in the ./assets/ folder.
#For convenience, I have added the stylesheet code line below, even though I don't have it in my local script 
dash.Dash(external_stylesheets=[dbc.themes.GRID])
num_reservoirs_max = 9

#distance
distance_unit_list_m                = ["m", "meter"]
distance_unit_list_ft               = ["ft", "foot", 'feet']
standard_distance_unit_m            = "m"
standard_distance_unit_ft           = "ft"

#density
density_unit_list_gcm3              = ["g/cm3", "gcc"]
density_unit_list_kgm3              = ["kg/m3"]
standard_density_unit_gcm3          = "g/cm3"
standard_density_unit_kgm3          = "kg/m3"

standard_distance_units             = [standard_distance_unit_m, standard_distance_unit_ft]
standard_density_units              = [standard_density_unit_gcm3,standard_density_unit_kgm3]

app = dash.Dash(__name__, prevent_initial_callbacks=True) 
app.layout = html.Div([
                        dbc.Row([
                            dbc.Col(
                                    dbc.Row([
                                            dbc.Col(html.Div("Number of reservoirs to compute 4D"), width=6, align="center"),
                                            dbc.Col(dcc.Dropdown(id="num_reservoirs",
                                                                 options=[dict(label=(i+1), value=(i+1)) for i in range(num_reservoirs_max)],
                                                                 value=1, clearable=False
                                                    )                                                            
                                            ,align="center"),
                                            dbc.Col(html.Button('Submit', id='submit_num_reservoirs'), width=3, align="center")
                                    ]),
                            width=3, style={"border-right":"2px black solid"}),
                            dbc.Col([
                                    dbc.Row([
                                            dbc.Col(html.Div("Water depth (used to compute total pressure)"), width=5),
                                            dbc.Col(dcc.Input(id="water_depth", type="number")),
                                            dbc.Col(dcc.Dropdown(id="water_depth_units",
                                                                 options=[dict(label=unit, value=unit) for unit in standard_distance_units],
                                                                 value=standard_distance_unit_m, 
                                                                 clearable=False,
                                                                 style={'width': '100%'}
                                                    )
                                            , width=2)
                                    ], align='center'),
                                    dbc.Row([
                                            dbc.Col(html.Div("Overburden bulk density (used to compute total pressure)"), width=5),
                                            dbc.Col(dcc.Input(id="overburden_bulk_rho", type="number"), width=2),
                                            dbc.Col(dcc.Dropdown(id="overburden_bulk_rho_units",
                                                                 options=[dict(label=unit, value=unit) for unit in standard_density_units],
                                                                 value=standard_density_unit_kgm3,
                                                                 clearable=False,                                                                                        
                                                                 style={'width': '100%'}
                                                    )
                                            , width=3)
                                    ], align='center')
                            ]
                            ,width=3, style={"border-right":"2px black solid"}), 
                        ], style={"border-bottom":"2px black solid"})    
            ])

if __name__ == '__main__':
    app.run_server(debug=True, dev_tools_hot_reload=False)

Answer 1

主要问题似乎是您使用的输入。您正在使用 dash_core_components 模块而不是 dash_bootstrap_components 模块的输入。

所以不是这个：

dbc.Col(dcc.Input(id="water_depth", type="number"))

这样做：

dbc.Col(dbc.Input(id="water_depth", type="number"))

如果您想使用 dcc.Input，但使用 bootstrap 样式，您也可以这样做：

dcc.Input(
    id="overburden_bulk_rho",
    type="number",
    className="form-control",
)

更新

如OP的评论中所述，您需要使用bootstrap.min.css才能使上述代码生成的css 类生效。请参阅 this reference 了解 bootstrap-grid.min.css 中包含的内容以及 bootstrap.min.css 中包含的内容。

Dash Bootstrap: 列布局问题

Dash Bootstrap: Problems with layout of columns

html

python

layout

plotly

plotly-dash