Plotly多页面Bootstrap仪表盘：移除水平滚动条及图片后空白

问题原因分析 #

1. 水平滚动条溢出：外层html.Div直接使用col-12 col-lg-12类，违反Bootstrap栅格结构规范（栅格需遵循Container → Row → Col层级关系），Col自带的左右padding加上Row的负margin，导致页面总宽度超出视口范围。
2. 图片后方空白：图片默认是inline-block元素，会产生额外的行内空白；同时容器布局未完全适配图片宽度，也会引发空白问题。

具体修复方案 #

1. 修正外层容器结构 #

将App布局的外层Div替换为Bootstrap规范的dbc.Container，内部嵌套Row和Col，避免直接给外层容器添加Col类：

app.layout = dbc.Container([  # 用dbc.Container替代原html.Div
    dcc.Location(id="url", pathname="", refresh=False),

    # Header
    dbc.Row([
        dbc.Col(html.A(
            html.Img(src=app.get_asset_url("leters.jpg"), className="img-fluid brand-other"),
            id="logo",
            href="https://www.leters.com/", target="_blank"
        ), width=12, className='justify-content-end d-flex'),
    ]),

    html.Div(id='page-content'),  

], fluid=True)  # fluid=True让容器占满视口宽度

2. 消除图片后方空白 #

给图片添加d-block类，将其改为块级元素，消除inline-block属性带来的行内空白：

html.Img(src=app.get_asset_url("leters.jpg"), className="img-fluid brand-other d-block"),

3. 全局溢出兜底（可选） #

如果修改后仍存在滚动条，可在项目的assets文件夹下新建style.css文件，添加全局样式限制横向溢出：

body {
    overflow-x: hidden;
}

完整修改后的App代码 #

import pandas as pd
from dash_auth import BasicAuth
from dash import Dash, dcc, html, Input, Output, callback
from dash_extensions.enrich import ServersideOutput, DashProxy, ServersideOutputTransform
import dash_bootstrap_components as dbc

from pages import test, error_404

df = pd.read_parquet('dataset.parquet.gzip')

external_stylesheets = [
    dbc.themes.BOOTSTRAP,
    dbc.icons.BOOTSTRAP,
]

app = Dash(__name__, title = 'Test',
    external_stylesheets=external_stylesheets,
    suppress_callback_exceptions=True,
)
server = app.server

app.layout = dbc.Container([
    dcc.Location(id="url", pathname="", refresh=False),

    # Header
    dbc.Row([
        dbc.Col(html.A(
            html.Img(src=app.get_asset_url("leters.jpg"), className="img-fluid brand-other d-block"),
            id="logo",
            href="https://www.leters.com/", target="_blank"
        ), width=12, className='justify-content-end d-flex'),
    ]),

    html.Div(id='page-content'),  

], fluid=True)


@callback(
    Output(component_id='page-content', component_property='children'),
    Input(component_id='url', component_property='pathname')
)
def routing(path):
    print(path)
    if path == "":
        return test.test
    else:
        return error_404

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

内容的提问来源于stack exchange，提问作者Vanessa