即使屏幕尺寸在 Dash-plotly 中使用 python 更改，如何在導航欄中固定按鈕的位置

Question

即使我們放大瀏覽器或屏幕尺寸發生變化，我也試圖將按鈕的 position 固定在我的 Dash 應用程序的 Nanbar 中。 我使用破折號引導組件來制作布局，但是當我放大或使用較小的顯示器時，按鈕會迷失方向。 我是新手，所以任何幫助將不勝感激。

100% 縮放

110% 縮放

這是我的代碼

import random
import time
import webbrowser
from collections import deque

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Output, Input

BS = "https://codepen.io/chriddyp/pen/bWLwgP.css"
app = dash.Dash('vehicle-data', external_stylesheets=[BS])

button_group = html.Div(
    [
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='HOME',
                       style={
                           'display': 'inline-block',
                           'align': 'center',
                           'color': 'white', 'marginLeft': '100px',
                           'fontSize': '15px ',
                           'backgroundColor': '#101820',
                           'width': '150px',
                           'height': '50px',
                           'marginRight': '100px'
                       }, className='lg'),

            href='http://127.0.0.1:5050/', refresh=True), className='lg'),

        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='OVERVIEW',
                       style={'color': 'white',
                              'backgroundColor': '#101820',
                              'marginLeft': '10px',
                              'fontSize': '15px ',
                              'width': '150px',
                              'marginRight': '100px',
                              'height': '50px'
                              }),
            href='/pages/overview', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='GRAPH',
                       style={'color': 'white',
                              'backgroundColor': '#101820',
                              'fontSize': '15px ',
                              'marginLeft': '10px',
                              'marginRight': '100px',
                              'width': '150px',
                              'height': '50px'
                              }),
            href='/pages/graph_page', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='CONSOLE',
                       style={'color': 'white',
                              'backgroundColor': '#101820',
                              'fontSize': '15px ',
                              'marginLeft': '10px',
                              'marginRight': '100px',
                              'width': '150px',
                              'height': '50px'
                              }),
            href='/log_stream', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='DIAGNOSTIC',
                       style={'color': 'white',
                              'backgroundColor': '#101820',
                              'marginLeft': '2px',
                              'fontSize': '15px ',
                              'width': '170px',
                              'marginRight': '100px',
                              'height': '50px'
                              }),
            href='/pages/diag', refresh=True))
    ],

)

app.layout = html.Div([
    html.Div([
        dbc.Row(
            [
                dbc.Col([button_group]),
            ],
            style={
                'textAlign': 'center',
                'position': 'sticky',
                'backgroundColor': '#101820',
                'display': 'flex',
                'marginRight': '0px',
            },
        ),
        dcc.Location(id='url', refresh=False),
        html.Div(id='page-content', children=[])
    ]),
])


if __name__ == '__main__':
    webbrowser.open('http://127.0.0.1:8050/')
    app.run_server(debug=True)

Answer 1

為了防止塊的內容被包裝到另一行，您需要添加white-space: nowrap; 到這個塊 CSS 樣式。

因此，對於 Dash，它是'whiteSpace': 'nowrap' ：

app.layout = html.Div([
    html.Div([
        dbc.Row(
            [
                dbc.Col(
                    [button_group],
                    style={'whiteSpace': 'nowrap'}
                ),
            ],
            style={
                'textAlign': 'center',
                'position': 'sticky',
                'backgroundColor': '#101820',
                'display': 'flex',
                'marginRight': '0px',
            },
        ),
        dcc.Location(id='url', refresh=False),
        html.Div(id='page-content', children=[])
    ]),
])

Answer 2

import random
import time
import webbrowser
from collections import deque

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import plotly.graph_objs as go
from dash.dependencies import Output, Input

BS = "https://codepen.io/chriddyp/pen/bWLwgP.css"
app = dash.Dash('vehicle-data', external_stylesheets=[BS])

button_group = html.Div(
    [
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='HOME',
                       style={
                           'display': 'inline-block',
                           'align': 'center',
                           'color': 'white', 'marginLeft': '100px',
                           'fontSize': '15px ',
                           'backgroundColor': '#101820',
                           'width': '150px',
                           'height': '50px',
                           'marginRight': '100px'
                       }, className='lg'),

            href='http://127.0.0.1:5050/', refresh=True), className='lg'),

        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='OVERVIEW',
                       style={'color': 'white',
                              'backgroundColor': '#101820',
                              'marginLeft': '10px',
                              'fontSize': '15px ',
                              'width': '150px',
                              'marginRight': '100px',
                              'height': '50px'
                              }),
            href='/pages/overview', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='GRAPH',
                       style={'color': 'white',
                              'backgroundColor': '#101820',
                              'fontSize': '15px ',
                              'marginLeft': '10px',
                              'marginRight': '100px',
                              'width': '150px',
                              'height': '50px'
                              }),
            href='/pages/graph_page', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='CONSOLE',
                       style={'color': 'white',
                              'backgroundColor': '#101820',
                              'fontSize': '15px ',
                              'marginLeft': '10px',
                              'marginRight': '100px',
                              'width': '150px',
                              'height': '50px'
                              }),
            href='/log_stream', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='DIAGNOSTIC',
                       style={'color': 'white',
                              'backgroundColor': '#101820',
                              'marginLeft': '2px',
                              'fontSize': '15px ',
                              'width': '170px',
                              'marginRight': '100px',
                              'height': '50px'
                              }),
            href='/pages/diag', refresh=True))
    ],

)

app.layout = html.Div([
    html.Div([
        dbc.Row(
            [
                dbc.Col([button_group]),
            ],
            style={
                'textAlign': 'center',
                'position': 'sticky',
                'backgroundColor': '#101820',
                'display': 'flex',
                'marginRight': '0px',
                'maxWidth':'1500px',
                'width':'1500px'
            },
        ),
        dcc.Location(id='url', refresh=False),
        html.Div(id='page-content', children=[])
    ]),
])


if __name__ == '__main__':
    webbrowser.open('http://127.0.0.1:8050/')
    app.run_server(debug=True)

Answer 3

只需將brand="Fixed Navbar"添加到您的代碼中，如下所示：

nav = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Page 1", href="#")),
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("More pages", header=True),
                dbc.DropdownMenuItem("Page 2", href="#"),
                dbc.DropdownMenuItem("Page 3", href="#"),
            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="Fixed Navbar",
    brand_href="#",
    color="lightgreen",
    dark=True,
)

現在可以通過以下方式將上面分配的nav添加到 UI：

app.layout = html.Div(children=[

    nav,
])

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

此外，請確保將import dash_bootstrap_components as dbc添加到您的代碼中。