如何管理仪表符引导组件(dbc)导航条元素中的按钮对齐？

Question

我想我的问题是如何格式化html，它是自动创建的。

我需要一个带几个按钮的肚脐。一个在左边，两个在右边。在这些按钮之间我需要一些短信。

我在下面的代码中要求这样做：

navbar = dbc.NavbarSimple(children=[
    dbc.Button(
        "Меню",
        id="menu_togle",
        n_clicks=0,
        color="secondary",
    ),
    html.H1(children=dashboard_name, style={'textAlign': 'center', 'color':'white'}),
    dbc.Container([
        dbc.Button(
            "Инструкция",
            id="instruction",
            n_clicks=0,
            color="secondary",
            className="me-1"
        ),
        dbc.Button(
            "Изменение параметров дашборда",
            id="open_offcanvas_scrollable",
            n_clicks=0,
            color="secondary",
            className="me-1"
        ),
    ],
    ),
],
color="dark",
dark=True,
fluid=True,
fixed = 'top',
links_left=True,
style={'display': 'flex', 'justify-content': 'space-between'}
)

但是HTML看起来像wierd -有很多div：

​

<nav color="dark" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" style="display: flex; justify-content: space-between;">
  <div class="container-fluid">
    <button n_clicks="0" n_clicks_timestamp="-1" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse">
      <div class="me-auto navbar-nav">
        <button id="menu_togle" class="btn btn-secondary">Меню</button>
        <h1 style="text-align: center; color: white;">Дашборд по репрезентативности экспедиции</h1>
        <div class="container">
          <button id="instruction" class="me-1 btn btn-secondary">Инструкция</button>
          <button id="open_offcanvas_scrollable" class="me-1 btn btn-secondary">Изменение параметров дашборда</button>
        </div>
      </div>
    </div>
  </div>
</nav>

​

我添加到navbar元素中的所有类都只保留在navbar元素中，而不是在那些div中。

我也试图在dbc.Row中做到这一点，但这也没有帮助(我猜也是出于同样的原因)。

元素如下所示：肚脐上的按钮

我很感激你能提供的任何帮助。

编辑的

我已经尝试了一些类似于我需要的dbc.ButtonGroup，但以前的一些水平的div仍然有我无法控制的边际。

代码示例：

navbar = dbc.NavbarSimple(children=[
        dbc.ButtonGroup([
        
        dbc.Button(
            "Меню",
            id="menu_togle",
            n_clicks=0,
            color="secondary",
            className="me-5"
        ),
        html.H1(children=dashboard_name, style={'textAlign': 'center', 'color':'white'}, className="me-5, ms-5"),
        dbc.ButtonGroup([
            dbc.Button(
                "Инструкция",
                id="instruction",
                n_clicks=0,
                color="secondary",
                className="me-1, ms-5"
            ),
            dbc.Button(
                "Изменение параметров дашборда",
                id="open_offcanvas_scrollable",
                n_clicks=0,
                color="secondary",
                className="ms-1"
            ),
        ],
        ),
        
        ])
    ],
    color="dark",
    dark=True,
    fluid=True,
    fixed = 'top',
    links_left=True,
    style={'display': 'flex', 'justify-content': 'space-between'}
    )

​

<nav color="dark" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" style="display: flex; justify-content: space-between;">
  <div class="container-fluid">
  <button n_clicks="0" n_clicks_timestamp="-1" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
  <span class="navbar-toggler-icon"></span>
  </button>
    <div class="navbar-collapse collapse">
      <div class="me-auto navbar-nav">
        <div role="group" class="btn-group">
        <button id="menu_togle" class="me-5 btn btn-secondary">Меню</button>
        <h1 class="me-5, ms-5" style="text-align: center; color: white;">Дашборд по репрезентативности экспедиции</h1>
          <div role="group" class="btn-group">
            <button id="instruction" class="me-1, ms-5 btn btn-secondary">Инструкция</button>
            <button id="open_offcanvas_scrollable" class="ms-1 btn btn-secondary">Изменение параметров дашборда</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

​

更新的导航栏，右边有边距

Answer 1

我不认为这是唯一正确的方法，但我可以用这个方法来修正页边距。

https://community.plotly.com/t/margins-in-dbc-components/65987/4?u=vokiatik

这就是我所补充的：

​

.navbar-nav{
    margin-right: 0;
    width: 100%;
}


#button-container{
    width: 100%;
    justify-content: space-between;
    text-align: end;
}

.btn-group-vertical>.btn, .btn-group>.btn {
    position: relative;
    flex: inherit;
}

​