Dash - dbc.container fluid = True 不覆盖所有可用空间

Posted 2023-03-22

【中文标题】Dash - dbc.container fluid = True 不覆盖所有可用空间

【英文标题】：Dash - dbc.container fluid = True does not cover all available space

【发布时间】：2021-10-19 17:14:01

【问题描述】：

所以我会保持简短。 我正在使用破折号网站代码并试图使导航栏占据页面的整个宽度。 如果我在容器中设置流体 = true，我认为它应该可以工作。它确实使宽度更大但不覆盖页面。感谢您抽出宝贵的时间！这是代码：

import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])


PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"

search_bar = dbc.Row(
    [
        dbc.Col(dbc.Input(type="search", placeholder="Search")),
        dbc.Col(
            dbc.Button(
                "Search", color="primary", className="ml-2", n_clicks=0
            ),
            ,
        ),
    ],
    no_gutters=True,
    className="ml-auto flex-nowrap mt-3 mt-md-0",
    align="center",
)

navbar = dbc.Navbar(
    [
        html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [
                    dbc.Col(html.Img(src=PLOTLY_LOGO, )),
                    dbc.Col(dbc.NavbarBrand("Navbar", className="ml-2")),
                ],
                align="center",
                no_gutters=True,
            ),
            href="https://plotly.com",
        ),
        dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
        dbc.Collapse(
            search_bar, id="navbar-collapse", navbar=True, is_open=False
        ),
    ],
    color="dark",
    dark=True,
)


@app.callback(
    Output("navbar-collapse", "is_open"),
    [Input("navbar-toggler", "n_clicks")],
    [State("navbar-collapse", "is_open")],
)
def toggle_navbar_collapse(n, is_open):
    if n:
        return not is_open
    return is_open


app.layout = dbc.Container(
    children=[
        navbar
    ],
    fluid=True,
)

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

【参考方案1】：

.container-fluid 向左右添加 15px 填充。因此，您可以在样式表中将其覆盖为 0，或使用 style 属性内联。

但我认为在这里不使用容器更有意义：

app.layout = html.Div(children=[navbar])

除此之外：

app.layout = dbc.Container(
    children=[navbar],
    fluid=True,
)