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/