Bootstrap 5：如何在最右边对齐导航折叠切换但在小型设备上仍然向下折叠？

Question

我想要一个在所有设备上始终可见的导航部分，并且折叠切换开关与右侧对齐。

现在，如果在Bootstrap 5.2中将折叠开关放在<div class="collapse navbar-collapse... ... /qavsom61/1/

如果我将切换代码放在<div class="collapse...之前，就像在原始引导程序示例中一样，展开的可折叠导航现在会向右对齐，而不是我不想要的向左对齐。

有什么“平滑”的解决方案吗？ 提前致谢！

如前所述，正如您在上面的小提琴上看到的那样，我希望在右侧放置一个始终可见的导航部分。 另一个水平导航在大型设备上向左对齐，在小型设备上垂直向下折叠。

我唯一能想到的是创建 2 个 navbar-nav 克隆，一个用于切换开关上方的大型设备，一个用于小型设备的切换开关下方。 但是，尽管没有那么顺利（#clones），但还有一些其他问题。 就像两个导航在大型设备上都左对齐，无论我到目前为止尝试了什么？：看看这里： https://jsfiddle.net/aw9z7jmr/

---

[编辑] 我只是四处游玩，并根据上面的“克隆”方法找到了一个不太令人愉快的解决方案。 因此，如果有人有更好的解决方案，请告诉我！

我将flex-fill添加到<ul class="navbar-nav ms-0 me-auto d-none d-lg-flex flex-fill">

但我不得不像这样修改 flex-fill class

.navbar .flex-fill {flex: 100 1 auto !important;}

https://jsfiddle.net/2orp39sh/

Answer 1

删除nav标签中的“ navbar-expand-lg ”

和d-lg-none在navbar-collapse

https://jsfiddle.net/2r7oy0bj/2/