如何管理破折号引导组件（dbc）导航栏元素中的按钮对齐？

Question

I guess my problem is with formating html which is created automatically.

I need a navbar with several buttons. 1 on the left, 2 on the right. Between those buttons i need some text.

I manged to do that with this code below:

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'}
)

But HTML looks wierd — has a lots of divs:

 <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>

And all classes I add to navbar elements stays only in navbar elements, but not in those divs.

I also tried to do that with dbc.Row, but that also didn't help (i guess by the same reason).

Elements looks like that: buttons on navbar

I'd appreciate any help you can give.

EDITED

I've managed to do something similar to what i need with dbc.ButtonGroup, but some previous leveled div still have margin-end which i couldn't control.

Code sample:

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>

updated navbar with margin on the right

Answer 1

I am not shure if its the only right method, but i could fix margins with this method.

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

That is what i added:

 .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; }