如何使导航栏中按钮的位置固定，即使屏幕尺寸在 Dash-plotly 中发生变化 python

Question

我试图在我的 Dash 应用程序的 Nanbar 中保持按钮的位置固定，即使当我们放大浏览器或屏幕尺寸发生变化时也是如此。我使用破折号 bootstrap 组件来制作布局，但当我放大或使用较小的显示器时，按钮会迷失方向。我是新手，所以任何帮助将不胜感激。

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=[])
    ]),
])

当缩放改变时正确显示导航栏的唯一方法，我知道的是固定宽度布局。

这是经过少量重构的示例代码。按钮的样式已移至 nav_btn_style，删除了不必要的嵌套元素。

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
import dash_bootstrap_components as dbc

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

# style for navigation buttons
nav_btn_style = {
    'align': 'center',
    'color': 'white', 
    'backgroundColor': '#101820',
    'fontSize': '1rem',
    'width': '10rem',
    'height': '3.2rem',
    'margin': '0rem 1rem',
}

button_group = dbc.Nav(
    [
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='HOME',
                style=nav_btn_style,
                ),
            href='/',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='OVERVIEW',
                style=nav_btn_style,
                ),
            href='/pages/overview',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='GRAPH',
                style=nav_btn_style,
                ),
            href='/pages/graph_page',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='CONSOLE',
                style=nav_btn_style
                ),
            href='/log_stream',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='DIAGNOSTIC',
                style=nav_btn_style,
                ),
            href='/pages/diag',
            refresh=True),
            )
    ],
    horizontal='around',
    style={
        'flexWrap': 'nowrap',  # no wrap buttons 
        'padding': '0.5rem 3rem',
        'border': '3px dotted crimson',  # nav bar border
        'position': 'sticky',
        'backgroundColor': '#101820',
        }
)

app.layout = html.Div([
    button_group,
    dcc.Location(id='url', refresh=False),
    html.Div(
        id='page-content', children=['TEST'],
        style={
            'height': '20rem',
            'border': '3px dotted royalblue',
            'display': 'flex',
            'justifyContent': 'center',
            'alignItems': 'center'
            }
        ),
    ],
    style={'margin': '0px auto', 'width': '80rem'}  # fixed width for outer div
)


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

以及外观

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)

如何使导航栏中按钮的位置固定，即使屏幕尺寸在 Dash-plotly 中发生变化 python

How to make the positions of buttons in navbar fixed even when the screen size changes in Dash-plotly with python

html

python

plotly

plotly-dash

dash-bootstrap-components