Bootstrap5同一行内实现一个div居中、另一个div右对齐的问题咨询

解决方案 #

你可以通过以下两种Bootstrap5原生方案实现需求，无需额外自定义CSS：

方案1：Flex自动边距实现（推荐，无脱离文档流问题） #

将三个div放在同一个flex父容器下，利用自动外边距控制位置：

<!-- 父容器设为flex布局 -->
<div class="d-flex align-items-center mt-2" id="container">
    <!-- 左侧div1，可放内容或留空 -->
    <div id="div1">
        <!-- 这里放div1的内容，不需要可以留空或者加d-none隐藏 -->
    </div>
    <!-- 居中的div2，mx-auto自动分配左右边距实现居中 -->
    <div id="div2">
        <a class="btn btn-lg btn-success" href="#"> Link 1 </a>
    </div>
    <!-- 右对齐的div3，ms-auto自动填充左侧剩余空间推到行尾 -->
    <div id="div3" class="ms-auto">
        <a class="btn btn-lg btn-info" href="#"> Link 2 </a>
        <a class="btn btn-lg btn-info" href="#"> Link 3 </a>
    </div>
</div>

如果需要div2完全不受左右元素宽度影响、严格相对于页面居中，可以给左侧div1和右侧div3都加上flex:1的样式，让二者占满左右相等的剩余空间。

方案2：绝对定位实现（div2完全居中，不受div3宽度影响） #

如果你不需要使用左侧div1的空间，可以给右侧div3设置绝对定位，父容器相对定位，直接让div2在父容器居中：

<!-- 父容器设为相对定位+flex居中 -->
<div class="d-flex justify-content-center align-items-center position-relative mt-2" id="div1">
    <!-- 居中的div2 -->
    <div id="div2">
        <a class="btn btn-lg btn-success" href="#"> Link 1 </a>
    </div>
    <!-- 右对齐的div3，绝对定位到行尾 -->
    <div id="div3" class="position-absolute end-0">
        <a class="btn btn-lg btn-info" href="#"> Link 2 </a>
        <a class="btn btn-lg btn-info" href="#"> Link 3 </a>
    </div>
</div>

这个方案的优势是div2会严格相对于父容器水平居中，不会因为div3的宽度变化偏移位置。

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