Html 引导响应导航栏，用于在宽度不适合所有元素时将元素放置在新行上

在boostrap 4中具有以下导航栏：

<nav class="navbar navbar-expand text-light bg-secondary">
<ul class="navbar-nav">
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">A</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">B</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">C</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">D</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">E</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">F</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">G</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">H</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">I</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">J</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">K</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">L</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">M</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">N</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">O</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">P</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">Q</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">R</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">S</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">T</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">U</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">V</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">W</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">X</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">Y</a></li>
    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">Z</a></li>
</ul>
</nav>

在大屏幕上，由于显示了所有元素，所以内容看起来不错。但是，在小尺寸屏幕上，仅显示起始元素，因为它们适合屏幕的宽度，而其余元素隐藏在视口之外，用户必须向右滚动才能看到它们

---

如何以响应的方式设置导航栏的样式，当屏幕尺寸较小时，让不适合的元素进入显示元素下方的新行。因为有超过12个元素，所以我无法使用引导网格概念来解决它。此外，我希望有一个动态的元素数量，并希望内容是中心显示

您可以使用flexbox实现这一点，默认情况下，

navbar nav

类有一个

flex wrap:no wrap

，这意味着nav项目将永远不会位于下方，您可以做些什么来解决这一问题

.navbar-nav{
  flex-wrap: wrap;
}

您可以设置

flex wrap:wrap，这应该是可行的，现在您需要设置导航项目的样式，以使其看起来很好，希望这对您有所帮助

你有一篇文章可以帮助你理解flexbox是如何工作的

要对齐资源中心，请将
justify资源中心
类添加到
nav
元素

<nav class="navbar navbar-expand text-light bg-secondary justify-content-center">