尝试使用引导程序 4 重新创建导航栏

Posted 2023-03-15

【中文标题】尝试使用引导程序 4 重新创建导航栏

【英文标题】：Trying to recreate a navBar using bootstrap 4

【发布时间】：2018-01-09 03:43:01

【问题描述】：

我知道这应该很容易，但我现在感觉脑子坏了。当我发现解决方案如此简单时，我可能会踢自己。

基本上，我正在尝试使用 Bootstrap 4 重新创建一个类似于本网站 (https://www.sandcloudtowels.com/) 上的导航栏。

我的目标是有一个全宽的流体标题容器，里面有一个非全宽的导航栏，并且很好地位于中心。我还希望标题在底部固定为 1px 实心边框以进行滚动。

这是我设法想出的： https://www.bootply.com/S4g9HGsy30

如果我将流体类添加到标题标签，那么它会使所有内容都变成全宽，包括里面的导航栏。如果我让它保持原样，那么底部的边框只会到达 navBar 的距离，而不是整个宽度。

有什么帮助吗？ 干杯。

【参考方案1】：

您在标题中使用class='container' 作为父级。只需删除标题中的容器类并添加另一个 <div class='container'</div>insdie <nav> 元素。

         <header>
            <nav class="navbar  navbar-expand-lg navbar-light bg-light">
                <div class='container'>
                   <a class="navbar-brand" href="#">Navbar</a>
                   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                   </button>
                   <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                     <div class="navbar-nav">
                        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#">Features</a>
                        <a class="nav-item nav-link" href="#">Pricing</a>
                        <a class="nav-item nav-link disabled" href="#">Disabled</a>
                     </div>
                   </div>
                </div>
            </nav>
        </header>