问题描述

所以我就长话短说。 我正在使用破折号网站代码，并试图让导航栏采取页面的完整宽度。 我看到如果我在容器中设置流体=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
            ),
            width="auto",
        ),
    ],
    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, height="30px")),
                    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)

推荐答案

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

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

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

包含以下内容：

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

这篇关于DASH-DBC.CONTAINER流体=True不会覆盖所有可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！