如何正确添加样式到我的 Dash 应用程序？

Question

我无法将 CSS 样式正确添加到我的 Dash 应用程序中。

我想创建一个仪表板，左侧有一个侧栏，右侧有一个顶部栏，其中包含一些指标和下面的图，如下所示：

所以，在我的 App.py 文件中，我有：

app = dash.Dash()
app.layout = html.Div(
            className="content",
            children=[

html.Div(
    className="left_menu",
    children=[
        html.Div(
            'This is the left menu'
        ),
    ]
),

html.Div(
    className="right_content",
    children=[
        html.Div(
            className="top_metrics",
            children=[
            'This is top metrics'
            ]
        ),
        html.Div(
            'This down top metrics'
        ),
    ]
),

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

和CSS文件：

.content{
 width: 100%;
 background: #F7F7F7;
 }

.right_content{
 width:85%;
 position:absolute;
 top: 0;
 right: 0; 
 }

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:85%;
 position:absolute;
 top: 0;
 right: 0;
 }

.left_menu {
 width: 15%;
 position: absolute;
 top: 0;
 left: 0;
 height: 100vh;
 z-index: 999;
 background: #2A3F54;
}

但是，我得到这个：

我不明白为什么“此下顶部指标”出现在那里，而不是在“顶部指标”下方

Answer 1

这里为您做如下.top_metrics：

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:100%;
 position:relative;
 top: 0;
 right: 0;
 }

但我建议您使用bootstrap，您不必编写 css，只需在 div 上包含类名即可。

Bootstrap 提供的 css 将为您提供用于构建布局的类，以及具有针对不同屏幕尺寸的响应式设计的 html div。