html - 当宽度不适合所有元素时， Bootstrap 响应式导航栏将元素放置在新行上

Question

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

在大屏幕上，内容看起来不错，因为显示了所有元素。然而，在小尺寸屏幕上，只有起始元素会显示，因为它们适合屏幕宽度，而其余元素则隐藏在视口(viewport)之外，用户必须向右滚动才能看到它们。

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

Answer 1

您可以使用 flexbox 实现此目的，默认情况下 navbar-nav 类有一个 flex-wrap: no-wrap，这意味着导航项永远不会消失下面，你可以做些什么来解决这个问题

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

您可以设置 flex-wrap: wrap; 而不是不换行，这应该可以工作，现在您需要设置导航项的样式以使其看起来不错，希望这对您有所帮助。

Here你有一篇文章可以帮助你理解 flexbox 的工作原理

为了对齐内容中心，将 justify-content-center 类添加到 nav 元素

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