部分折叠的 Bootstrap 导航栏，隐藏项不在边缘

Question

有一个 of questions 用于部分折叠 Bootstrap 导航栏，例如：

Item1  Item2  Item3  Item4  Item5

可以折叠为：

Item1  Item2  Item3  =menu=

或者：

=menu=  Item3  Item4  Item5

等等。这是通过两个导航栏实现的，其中一个折叠，一个不折叠。

但我想折叠 单个导航栏，其中要隐藏的项目不在边缘：

Item1  Item3  Item5  =menu=

可以用 Bootstrap 5 来完成吗？

Answer 1

没有 Bootstrap 本机解决方案。但是有一个变通方法使用两个相同的导航栏。

导航栏 1:

• 具有 d-none d-md-block（例如）应在小屏幕上隐藏的导航项
• 在大屏幕上显示所有导航项
• 它没有切换按钮（或者，它有，但 "external content" 是第二个导航栏）

导航栏 2：

• 具有相同的导航栏项目和一个切换按钮
• 始终处于折叠状态
• 在小屏幕上显示切换按钮；单击时，它会显示一个包含所有导航项的下拉菜单

例如大屏幕：

Item1  Item2  Item3  Item4  Item5

例如小屏幕：

Item1  Item3  Item5  =menu=
                     Item1
                     Item2
                     Item3
                     Item4
                     Item5

或例如小屏幕：

=menu=  Item1  Item3  Item5
Item1
Item2
Item3
Item4
Item5

Answer 2

首先，如果不看代码，很难说出确切的解决方案。如果菜单数量有限，那么您可以使用媒体查询（将样式应用于除第一个 2 个和最后一个之外的所有导航栏选项）。 另一种方式是用javascript，（可以根据屏幕大小做一个条件来触发事件）。如果您分享遇到问题的代码，事情会容易得多。