html - 如何让我的导航栏像 flexbox 一样响应，在小断点处变成 2 行？

Question

我的页面底部有一个漂亮的导航栏，中间有一个 Logo ，可将您带到主页，两侧各有 2 个链接，可将您带到这些页面。随着页面变小，我已经使用@media css 使其变小，但是一旦你遇到 xs/sm 断点，它就太多了，无法显示在屏幕上。

例如:

|--------视频--------|--------关于------|------LOGO/BRAND----- -|------日程安排------|--------询问--------|

有没有什么方法可以让导航栏链接在两侧相互堆叠，这样我就可以保持干净、对称的外观，中间有 Logo ，而不是让它成为一个折叠的菜单按钮？

例如:

|----视频----LOGO/BRAND----日程----|

|----关于--------------------------------问--------|

Answer 1

如果您使用的是 bootstrap v4，也许您可​​以在第一列和第三列中放置另一行，然后在该新行中放置两列(每个链接一个)。使用 col-sm-12 强制线在小屏幕上环绕，然后使用 col-md-6 让它们在屏幕变大时水平堆叠。不幸的是，它有很多嵌套的 div。