时间戳

首页 > 解决方案 > 导航栏高度不能正确移动响应

html - 导航栏高度不能正确移动响应

问题描述

我正在尝试做的事情（包括 JSBin）

我的导航栏在桌面上运行良好：当您单击某个项目时，它会扫描到页面的该部分，从标题开始。但是，当我调整到移动设备时，间距是关闭的。当您单击导航栏上的“第 2 节”时，您应该会看到导航栏正下方弹出“第 2 节”。

请参阅JSBin上的示例。（使用开发人员工具在移动设备上显示以查看在导航栏周围单击时出现的问题）。

我尝试了什么/我认为问题是什么

我很确定这与此有关：

.anchor:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

我从这个Github 页面得到的，但我不知道如何根据屏幕大小自动更改 75px 数字。我阅读了这个问题/答案，但仍然无法弄清楚如何在我的情况下更改 CSS。

标签： htmlcssbootstrap-4responsive-designnav

解决方案

看起来该页面适用于 Bootstrap。您正在寻找的内容直接内置在 CSS 中！看看这个页面。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

基本上发生在您身上的是，一旦您的页面缩小到移动设备。它会导致您的按钮（文本元素）堆叠，导致您的导航垂直大于应有的大小！要回答您的代码问题，请尝试以下操作：

.anchor:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

@media only screen and (max-width: 480px) {
  .anchor:before { 
    height: 65px; 
  }
}

发生的情况是，一旦您的屏幕宽度低于 480 像素（此值可以调整为您需要的任何值），它将运行height: 65px;并覆盖其height上方的样式。

当您不希望导航栏调整大小时，另一种方法是设置overflow: hidden;并具体定义您想要的高度。（我个人喜欢使用height: 47px;。对我来说感觉就像一个完美的尺寸）

那应该回答你的问题。但是，您真正应该做的是，一旦您的屏幕缩小到足够小，您应该考虑将所有导航按钮编译到下拉菜单中。

如果您愿意，请查看此页面： https ://www.w3schools.com/howto/howto_js_topnav_responsive.asp

推荐阅读