如何消除导航栏与浏览器窗口顶部空白并保障页面响应式

问题根源 #

1. 浏览器默认给body、ASP.NET的form元素设置了默认margin-top值，导致导航栏上方出现空白间隙
2. 现有CSS中给.container.max-width-940设置了固定min-width:1390px，屏幕宽度小于1390px时会出现横向滚动条，破坏响应式特性

具体修改步骤 #

步骤1：清除元素默认边距 #

在页面头部的<style>标签中添加以下代码，清除body和form的默认边距：

body, form#form1 {
    margin: 0 !important;
    padding: 0 !important;
}

现有导航栏的行内样式无需修改，父元素边距清除后导航栏会自动贴合窗口顶部。

步骤2：修复响应式样式 #

将你已编写的CSS替换为以下内容，移除固定最小宽度限制，适配小屏幕设备：

@media (min-width: 992px) {
    .container.max-width-940 {
        max-width: 1390px !important;
    }
}

@media (min-width: 1200px) {
    .container.max-width-940 {
        max-width: 1390px !important;
    }
}

.container.max-width-940 {
    min-width: auto !important;
    width: 100% !important;
}

修改效果 #

• 导航栏完全贴合浏览器窗口顶部，无多余间隙
• 页面在不同尺寸屏幕下均可自动适配宽度，不会出现横向滚动条

问题示意：

预期效果：

额外优化建议：当前页面重复引入了三个不同版本的jQuery（1.8.3、3.2.1 slim、3.3.1），可能引发JS功能冲突，建议仅保留一个兼容Bootstrap4的jQuery版本即可。

内容的提问来源于stack exchange，提问作者rimi