调整页面大小和导航栏答案

【问题标题】：Resizing page and nav bar调整页面大小和导航栏
【发布时间】：2017-08-31 04:18:00
【问题描述】：

我的导航栏在正常大小的页面/屏幕上可以正常工作。但是在手机或较小的屏幕上，它会切断导航栏的黑色背景并保留列表内容。使它们不可见，并出现一个看起来什么都没有的水平滚动条。

错误预览：

我在 html 中的代码只是一个列表，在 css 中的基本样式和位置是边距：0；宽度：1920px；

我尝试将其设置为 100%，但它只是强制导航栏文本覆盖图像，而不扩展黑条。我刚刚为图片使用了 100% 的最大宽度，它工作正常。

我能找到的所有教程都使用引导带，我没有使用引导带，因为这是一个练习学校作业，并且在期末考试中不允许使用引导带

【问题讨论】：

【解决方案1】：

nav{ 
  position: absolute;
  top:0;
  width: 100%;
}
#serv{
  width:100%;
  margin-top: THE HEIGHT OF NAV;
}

将此推送到导航和#serv。

【讨论】：

【解决方案2】：

我认为你没有在导航栏中使用导航栏类并参考我的 plunker，它是移动响应的。

推荐这个 Plunker。使用 ultag 和 litag

[https://plnkr.co/edit/5gvJYTgRcp6WzrN9cIOd?p=preview][1]

【讨论】：