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>

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

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

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

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

1 个答案: