使用Bootstrap 5将导航按钮对齐到页面右侧的问题咨询

存在的问题 #

• 栅格结构不符合Bootstrap 5规范：Bootstrap栅格系统要求row的直接子元素必须为col系列类，你当前代码中外层row内直接嵌套了第二个row，没有用col包裹，导致内层row宽度计算异常，无法占满父容器宽度。
• 按钮容器宽度设置错误：按钮所在列使用了col-1类，仅占行宽度的1/12，即便列内设置了justify-content-end右对齐，列本身位于页面左侧，按钮自然无法移动到页面最右侧。

修改方法 #

调整栅格结构，删除多余的内层row，将按钮所在列设置为占满整行，再通过弹性布局右对齐即可，修改后的代码如下：

<div class="row">
    <div class="col-8 offset-2 col-lg-9 col-xl-6 offset-xl-3">
        <h1 class="mt-5">听起来不错！我们继续查看您的信息。</h1>
    </div>
    <div class="col-12 d-flex align-items-center justify-content-end">
        <div id="next-parent" class="resize-animated-image">
            <div id="nextbutton" @onclick="NextClickHandler" class="icon round-button arrow"></div>
        </div>
    </div>
</div>

如果你需要保留内层row结构，可给内层row添加w-100类强制占满父容器宽度，同时将按钮所在的col-1修改为col-12即可达到相同效果。

内容的提问来源于stack exchange，提问作者Baba