位置破折号引导导航栏答案

【问题标题】：location dash bootstrap navbar位置破折号引导导航栏
【发布时间】：2020-09-30 20:25:35
【问题描述】：

我有一个导航栏，我希望链接位于中心。我现在使用类名“ml-auto”将它们放在右侧，但我无法管理它们移动到中心。有谁能帮忙吗？在我的代码下方。

nav_item = dbc.Nav(
    [
        dbc.NavItem(dbc.NavLink("World Map", active= True, href="/page-1")),
        dbc.NavItem(dbc.NavLink("Table", active= True, href="/page-2")),
        dbc.NavItem(dbc.NavLink("Moran's l", active= True, href="/page-3")),
        dbc.NavItem(dbc.NavLink("Scatter Plots", active= True, href="/page-4"))
    ],
    fill= True
)

navbar = dbc.Navbar(
    [
        html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [
                    dbc.Col(html.Img(src= oord_logo, height="100px"), className="ml-5"),
                ],
                align="center",
                no_gutters=True,
            ),
            href="https://plot.ly",
        ),
        dbc.NavbarToggler(id="navbar-toggler"),
        dbc.Nav([nav_item], navbar=True, className="ml-auto",)
    ],
    color="white",
    dark=False,
    className = "mb-5"
)

【问题讨论】：

你试过用className="m-auto"代替className="ml-auto"吗？

标签： python css bootstrap-4 plotly-dash

【解决方案1】：

使用mr-auto 而不是ml-auto。

使用mr-auto，您可以在右侧获得边距。这就是您想要的，因为您希望具有此类的元素（Nav 组件）显示在左侧。

与问题无关，但您将一个 Nav 组件嵌套在另一个似乎不必要的组件中。另外你把NavbarToggler组件放在了中间，这意味着这个组件生成的汉堡按钮也会显示在中间。

【讨论】：