使用 Dash plotly 删除响应功能

Question

我正在使用 MacOS 11.5.2 使用 google colab。
我使用的 Dash 版本是 1.21.0

我通常在大屏幕上编写破折号代码，现在我在移动到小屏幕时注意到了这个问题。这是一个例子：

import plotly.express as px
from jupyter_dash import JupyterDash

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

app = JupyterDash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
                       dbc.Row([dbc.Col("Top left"),dbc.Col("Top right")]),
                       dbc.Row([dbc.Col("Bottom left"),dbc.Col("Bottom right")])
                       ]
    )                      

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

输出如预期的那样，2 x 2 网格，每个单词在各自的位置。 但是当我用绘图替换文本时，网格结构会自动改变。

app = JupyterDash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])
df = px.data.tips()
fig1 = px.histogram(df,x="tip")
fig2 = px.scatter(df,x="total_bill",y="tip")
fig3 = px.bar(df,x="sex")
fig4 = px.histogram(df,x="total_bill")

app.layout = html.Div([
                       dbc.Row([dbc.Col(dcc.Graph(figure=fig1,id="Histogram tip")),dbc.Col(dcc.Graph(figure=fig2,id="Scatter plot bill vs tip"))]),
                       dbc.Row([dbc.Col(dcc.Graph(figure=fig3,id="Barplot gender "),width=3),dbc.Col(dcc.Graph(figure=fig4,id="Histogram bill"),width=9)])
                       ]
    )                   

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

现在第一行变成垂直堆叠而不是水平堆叠。这是屏幕截图（我缩小了一点）

但是如果我真的把我的浏览器缩小到那么远，显示的布局就会正确显示

我不明白为什么响应式布局功能会在这种情况下启动，我想将其关闭，以便我的仪表板以 2x2 而不是 3 行布局显示。

Answer 1

我终于通过在我的应用中使用dbc.Container 并设置fluid=False 来解决它。