将导航栏项目框拉伸到浏览器的整个宽度

Question

我正在使用Bootstrap设计一个响应式网站。我试图使内容（或）导航项框扩展到浏览器的整个宽度。

我尝试使用容器流体类包装导航项，将宽度设置为100％，但仍无法获得所需的输出

<div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a href="#" class="nav-link alert alert-success">Chicken</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link alert alert-danger">Beef</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link alert alert-warning">Sushi</a>
        </li>
    </ul>
</div>

输出应该是，导航项目的所有彩色框都可以拉伸到浏览器的整个宽度，也就是说，当将浏览器压缩到-xs大小时，将在右上方显示一个切换按钮，单击后，将在彩色框中出现一个下拉菜单，这些彩色框应拉伸到浏览器的整个宽度。

这是jsfiddle链接：https://jsfiddle.net/ejzrmvxq/