如何使用Bootstrap实现同一行两个div分别水平居中和右对齐

你可以直接使用Bootstrap内置的flex和定位工具类实现需求，不需要额外编写自定义CSS，以下是两种对应不同场景的实现方式：

方案1：轻量实现（无定位，居中区域为除第二个div外的剩余空间） #

如果不需要第一个div严格在整个父容器的绝对中心，仅需要相对剩余空间居中，直接使用自动外边距即可：

<div class="d-flex w-100 p-3 border">
  <div class="mx-auto p-2 bg-light">div1（居中）</div>
  <div class="p-2 bg-light">div2（靠右）</div>
</div>

核心类说明：

• d-flex：将父容器声明为flex布局
• w-100：设置父容器宽度为100%，占满可用横向空间
• mx-auto：给第一个div设置水平方向左右自动外边距，自动撑开左右空间实现居中

方案2：严格居中（第一个div在父容器绝对中心，不受第二个div影响） #

如果需要完全匹配你给出的预期布局，第一个div在整个父容器的水平正中心，第二个div靠右不占用居中计算空间，使用定位实现：

<!-- 父容器开启相对定位，同时设置flex主轴居中 -->
<div class="d-flex justify-content-center position-relative w-100 p-3 border">
  <div class="p-2 bg-light">div1（全局居中）</div>
  <!-- 第二个div绝对定位贴靠右侧 -->
  <div class="position-absolute end-0 p-2 bg-light">div2（靠右）</div>
</div>

核心类说明：

• position-relative：给父容器开启相对定位，作为子元素绝对定位的参照
• justify-content-center：设置flex主轴居中，让第一个div默认在父容器正中间
• position-absolute end-0：给第二个div设置绝对定位，固定贴在父容器最右侧，不会挤压第一个div的居中位置

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