CSS 需要移动适配帮助（Plotly Dash 应用）

Question

我几乎完成了可以看到的 Web 仪表板 here. Here is the source code。我想改进的最后一点是导航栏和页脚的移动适应性。我正在努力正确定位元素，在某些设备上，它看起来比在其他设备上更糟糕。我在 CSS 方面还不是最好的，所以我需要一些帮助。

我遇到的几个问题是标题定位不正确：

.

我希望将其放置在顶部和底部之间的距离相等的位置。我希望它与左侧的距离与汉堡按钮与右侧的距离相同。

页脚也有同样的问题。它看起来组织得不太好：

甚至更糟：

我希望这些元素在顶部和底部之间的距离相等并且永不重叠，最好全部排成一行。我敢肯定这里有很多解决方案，但是任何简单且看起来更有条理的解决方案都会受到赞赏。

我需要提及的一件事是 HTML 元素在 Plotly Dash 环境中的 Python 代码中定义，但我很确定这没有区别。

我在这里附上了一些 Plotly HTML 和 CSS 代码，但完整代码是 here:

HTML 导航条代码：

app.layout = html.Div([
html.Nav([
    html.Div("Covid-19 global data Dashboard", className="dashboard-title"),
    html.A(
        id="toggle-button",
        children=[
            html.Span(className="bar"),
            html.Span(className="bar"),
            html.Span(className="bar"),
            ],
        href="#",
        className="toggle-button"),
    html.Div(
        id="navbar-links",
        children=html.Ul(
            children=[
                html.Li(html.A("Home", href=homeURL)),
                html.Li(html.A('Source Code', href=sourceCodeURL)),
                html.Li(html.A("CSV Data", href=sourceDataURL))]),
        className="navbar-links active"
    )]

HTML 页脚代码：

html.Footer([
    html.Div("created by Sebastian Meckovski", id='footer-text'),

    html.Div([
        html.P(['Find Me On:'], id='find-me-on'),
        html.A([html.Img(src=app.get_asset_url('linkedInLogo.png'), style={'height': '2rem'})],
               href=linkedInURL),
        html.A([html.Img(src=app.get_asset_url('facebookLogo.png'), style={'height': '2rem'})],
               href=facebookURL)
    ], id='footer-links')

CSS 桌面视图：

body {
  background-color: var(--LightBlue);
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--DarkBlue);
  color: white;
}

.container {
  position: relative;
  min-height: 100% ;
}

.dashboard-title{
  font-size: 1.2rem;
  margin: .5rem;
}

.navbar-links ul{
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a{
  text-decoration: none;
  color: white;
  padding: 1.5rem;
  display: block;
}

.navbar-links li a:hover{
  background-color: var(--DarkBlueHover);
}

.toggle-button{
   position: absolute;
   top: .8rem;
   right: 1rem;
   display: none;
   flex-direction: column;
   justify-content: space-between;
   width: 30px;
   height: 21px;
}

.toggle-button .bar{
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

#footer {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  width: 100%;
  background: var(--DarkBlue);
  color: white;
  height: 3.5rem;
}

#footer-links{
  display: flex;
}

#find-me-on{
  padding-right: 20px;
  font-size: .8rem;
}

#footer-text {
  margin: .5rem;
  font-size: .8rem;
}

手机浏览：

@media only screen and (max-width: 500px) {

  .dashboard-title {
    font-size: 1rem;
    padding-right: 80px;
  }

  .toggle-button {
    display: flex;
  }

  .navbar-links {
    display: flex;
    width: 100%;
  }

  .navbar{
    align-items: center;
    flex-direction: column;
    min-height:45px;
  }

  .navbar-links ul {
    width: 100%;
    flex-direction: column;
  }

  .navbar-links li{
    text-align: center;
  }

  .navbar-links li a{
    padding: .5rem 1rem;
  }

  .navbar-links.active {
    display: none;
  }

  H2{
    font-size: 15px;
  }

  #footer-text {
    margin: .5rem;
  font-size: .8rem;
  }

  #find-me-on{
    padding-right: 15px;
  }
}

Answer 1

对于 .navbar class 将 justify-content 属性设置为居中，因为如果将 flex-direction 设置为 column，它会“旋转”视图对象，因此 align-items 开始水平工作。

所以：

.navbar{
  justify-content: center;
  flex-direction: column;
  min-height: 45px;
}

现在对于导航栏水平居中：因为您将 .toggle-button 设置为绝对的，所以它被设置为距右侧 1rem，而 .dashboard-title 在其父级内部居中。要解决此问题，您只需将 .navbar class 内的边距更改为 1rem，现在为 0.5rem；还要确保 .navbar 没有被其父级水平居中。

经过这些更正后，导航栏看起来像这样：

对于页脚，它也是 flexbox 大小写。您的图片位于元素内部，因此您必须将内容垂直居中。

下图仅用于预览调试目的，请将 CSS 设置在您之前设置的位置。

a{
  display: flex;
  align-items: center; // Now all <a> element children are centered vertically.
}

CSS 需要移动适配帮助（Plotly Dash 应用）

CSS Mobile Adaptation help needed (Plotly Dash app)

html

css

navbar

footer

plotly-dash