导航栏中的Cols不显示在全宽容器中

Question

我想在页面中添加一个粘性标题，bootstrap为它提供了一个类，我还添加了一个容器来集中内容并使其与下面的内容一样宽。

但是当我添加一行和12列而不是容器的整个宽度时，请参阅下面的代码。

<nav class="navbar fixed-top navbar-light sticky-header">
      <div class="container sticky-header-container">
          <div class="row">
              <div class="col-md-3">test3
              </div>
              <div class="col-md-6">test2
              </div>
              <div class="col-md-3">test3
              </div>                    
          </div>
      </div>
</nav>

Answer 1

您可以像这样在行中添加一个类：

编辑：正如ZimSystem指出的那样，bootstrap中有一个w-100类，所以只需这样做：

baseCfg_3view.cfg

这应该可以获得100％的容器宽度。

工作样本：https://www.bootply.com/J5gKTedgPr

Answer 2

Bootstrap 4 Navbar并未设计为包含网格行和列。它设计为contain the support content。

当您使用container inside a navbar时，它会使容器中的display:flex容器与容器中的行对齐，而容器的开头（左侧）不会填充宽度。

作为解决方法/黑客，您可以使用display:block将容器还原为d-block，然后使用px-0从导航栏中删除默认的左/右填充：

https://www.codeply.com/go/T81SqA32rJ

<nav class="navbar fixed-top sticky-header px-0">
      <div class="container-fluid d-block sticky-header-container">
          <div class="row">
              <div class="col-md-3">test3
              </div>
              <div class="col-md-6">test2
              </div>
              <div class="col-md-3">test3
              </div>                    
          </div>
      </div>
</nav>