删除左边的空白 space - plotly dash bootstrap

Question

我正在使用破折号 bootstrap 组件，所以我的所有组件都在我的布局中我想要的位置。但是他们排在中间。从左侧到我的第一张图有很多空白 space。为什么会这样，我该如何删除它？

这是我的代码及其外观。我不知道为什么我的组件没有从最左边的点开始。当然除了我的 'Title'。这应该是中心。但是我的标签和图表都关闭了。

from dash import Dash, dcc, html, Input, Output  # pip install dash (version 2.0.0 or higher)
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets = [dbc.themes.BOOTSTRAP])
# ------------------------------------------------------------------------------
# App layout
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H1("Title", style={'textAlign': 'center'})
        ], width=12)
    ]),

    dbc.Row([
        dbc.Col([
            html.Label("Label1"),
            dcc.Loading(id='loading0', parent_style=loading_style, children = [dcc.Graph(id='feature_plots', figure={})])
        ], width=6),
        dbc.Col([
            html.Label("Label2"),
        ], width=3)
    ]),
]
)

Answer 1

尝试将 fluid = True 包含在您的 dbc.Container() 中。这可能会使您的应用 space 低于，因此您可能还想包含 style={"height": "100vh"} 以确保容器跨越整个可用垂直 space。这是我这边改变背景颜色的结果。因此，与您的设置相比，下面代码片段的完整变化是：

className = 'bg-success ', fluid = True, style={"height": "100vh"}

应用图片：

完整代码：

# from dash import Dash, dcc, html, Input, Output  # pip install dash (version 2.0.0 or higher)
# import dash_bootstrap_components as dbc

from jupyter_dash import JupyterDash
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
# ------------------------------------------------------------------------------
# app  = JupyterDash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H1("Title", style={'textAlign': 'center'})
        ], width=12)
    ]),

    dbc.Row([
        dbc.Col([
            html.Label("Label1"),
            dcc.Loading(id='loading0',
                        # parent_style=loading_style,
                        children = [dcc.Graph(id='feature_plots', figure={})])
        ], width=6),
        dbc.Col([
            html.Label("Label2"),
        ], width=3)
    ], className = "")
], className = 'bg-success ', fluid = True, style={"height": "100vh"}
)

# app.run_server(mode='inline', port = 9011)  
app.run_server(port = 9096, use_reloader = False)

删除左边的空白 space - plotly dash bootstrap

Remove empty left space - plotly dash bootstrap

hyphen

plotly

plotly-dash

dash-bootstrap-components

应用图片：

完整代码：