Bootstrap中navbar的data-toggle下拉菜单无法占满屏幕宽度如何解决

• 你的导航栏内部使用了Bootstrap自带的.container类，该类默认在移动端视口下有左右内边距与水平居中的外边距，下拉菜单作为其内部子元素，即便给.navbar-nav设置100vw宽度，也会从container的内容区域起始位置计算宽度，因此左侧会出现固定留白，同时还可能触发页面横向滚动条。

提供两种可选方案：

方案1：修改HTML结构（操作最简单） #

将<nav>标签内部的<div class="container">替换为<div class="container-fluid">，container-fluid是Bootstrap提供的全宽容器，默认撑满父元素宽度，不会额外添加限制宽度的边距，修改后无需额外调整CSS即可实现下拉菜单全屏宽度。如果需要保留导航栏头部（品牌名、汉堡按钮）的左右边距和之前一致，可给container-fluid添加px-3类即可。

方案2：修改CSS规则（无需改动HTML） #

调整你的移动端媒体查询规则，给折叠下拉容器设置绝对定位，脱离父级.container的宽度限制，直接相对于固定定位的导航栏定位，修改后的代码如下：

@media (max-width: 576px){
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        background-color: #0d6efd;
    }
    .navbar-nav{
        margin-top: 11px;
        max-height: 158px;
        width: 100%;
    }
    .nav-link{
        border-top: 1px solid black;
    }
}

注意事项 #

• 你当前的导航栏已经设置了fixed-top类，属于固定定位元素，因此.navbar-collapse设置绝对定位后会自动以导航栏为父级参照定位，top:100%刚好落在导航栏底部，不会遮挡导航内容。
• 背景色取值和导航栏的bg-primary保持一致即可，可根据你的自定义主题调整。

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