如何创建带有垂直堆叠菜单的两行 Bootstrap 4 导航栏？

创建具有两行的 Bootstrap 4 导航栏

挑战

在 Bootstrap 4 中，用户经常遇到构建具有不同行的导航栏的挑战排列：左侧有一个突出的品牌/图标，右侧有两个垂直对齐的导航栏导航菜单。目标是实现两个菜单在图标右侧占据单独行的布局。

解决方案：利用 Flexbox

为了垂直对齐菜单，我们可以利用 flex-column flexbox navbar-collapse div 上的实用程序类。这会为 div 的子元素设置 flex-direction: column，确保它们垂直堆叠。

<div>

其他注意事项

要增强自定义和对齐功能，请考虑以下提示：

• 调整图标大小：如果图标太大或太小，可以使用 font-size 来调整调整其大小。
• 在菜单之间创建空间：使用第二个导航栏导航上的 margin-top 在菜单之间添加一些垂直空间。
• 对齐菜单右： 在 navbar-nav 类上使用 margin-left: auto 将它们对齐到图标。

通过这些调整，您可以根据需要创建带有两个垂直堆叠菜单的 Bootstrap 4 导航栏。

以上是如何创建带有垂直堆叠菜单的两行 Bootstrap 4 导航栏？的详细内容。更多信息请关注PHP中文网其他相关文章！