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

Question

我无法在Dash App中正确添加CSS样式。

我想创建一个仪表板，左侧有一个侧栏，右侧有一个顶部栏，上面有一些度量和下面的图，像这样：

因此，在我的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

在此为您的var d1 = new Date(2019,01,01,1,20) var d2 = new Date(2019,01,01,2,20) console.log(d1==d2) // false console.log(d1.toDateString() == d2.toDateString()) // true 做以下事情：

.top_metrics

但是我建议您使用 bootsrtap ，因为您不必编写CSS，而只需在div中包含类名即可。

Bootstrap提供的CSS可为您提供类，以针对不同屏幕尺寸的响应式设计来构建布局和html div。