html - 如何正确右对齐 svg 图像旁边的按钮

Question

我有一个带有标题的侧边栏。我想在标题中嵌入一个徽标+切换按钮。

由于某种原因，我无法正确对齐按钮。

我根据 bootstrap 5 docs 和一些 SO 答案尝试过的内容：

text-right

text-end

float-right

他们都没有工作。

如果屏幕调整大小（如何使其成为静态/粘性），如何将切换按钮向右对齐并防止它改变位置？

JS FIDDLE 现场演示

当前结果：

期望的结果（中间垂直对齐，右侧水平对齐）：

标签： htmlcsstwitter-bootstrapbootstrap-5

Answer 1

您应该添加 justify-content-end并将mx-3您的代码片段更改为这个，一切都会好起来的

              <div class="col d-flex align-items-center justify-content-end mx-3">
                    <button type="button" id="sidebarCollapse" class="btn btn-light float-right">
                    <i class="bi bi-caret-left-fill" style="color: #193D4C;"></i>
                    </button>
                </div>