Question

我知道这应该很容易，但此刻我的大脑感到很难受。当我发现解决方案有多简单时，我可能会踢自己。

基本上我正在尝试使用Bootstrap 4重新创建一个类似于本网站（https://www.sandcloudtowels.com/）上的NavBar。

我的目标是拥有一个全宽的流体标题容器，其内部的navBar不是全宽，并且位于中心。我还希望标题在底部用固定的1px边框固定以便滚动。

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

如果我将流体类添加到标头标签，那么它会使所有内容都成为全宽，包括内部的navBar。如果我离开它的方式那么底部的边框只会到达导航栏的距离而不是整个宽度。

有任何帮助吗？欢呼声。

Answer 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>

尝试使用bootstrap 4重新创建一个navBar

1 个答案: