如何实现Bootstrap重叠胶囊状进度条？

嘿，这个缝隙问题我之前也碰到过！本质是两个进度条都带右侧圆角，实际进度条的圆角会在边缘留出空隙，导致后面的预计进度条没法填满。咱们只需要调整一下圆角的归属，就能轻松解决，还不影响你用百分比控制宽度的逻辑。

修改后的完整代码 #

CSS 部分（关键调整）

.progress-bar.bg-actual { 
  background: #b445f5; 
  border-radius: 0; /* 去掉实际进度条的右侧圆角，让它边缘是直角 */
}
.progress-bar.bg-projected { 
  background: #d391fa; 
  border-radius: 0 500px 500px 0; /* 只给预计进度条保留右侧圆角 */
}
.progress { 
  border-radius: 500px !important; 
  height几 SPDXAfter设定"拉(庄强aces一团查实 multiplying下的注释，这里是确保内部进度条不会超出容器的胶囊圆角 */
  overflow: hidden;
}

HTML & JS 部分（保留原有逻辑，新增边缘情况处理）

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-4">
 <div class="row">
  <div class="col">
   <div class="progress">
    <div id="actual-progress" class="progress-bar bg-actual"></div>
    <div id="projected-progress" class="progress-bar bg-projected"></div>
   </div>
  </div>
 </div>
</div>

const data = { actual: 1155, projected: 1573, limits: [500, 1000, 2500] };
const actualProgress = document.getElementById("actual-progress");
const projectedProgress = document.getElementById("projected-progress");
const barLength = Math.max(...data.limits);
const actualPercentage = (data.actual / barLength) * 100;
let projectedPercentage = 0;

// 处理边缘情况：如果实际数据超过预计，就隐藏预计进度条，给实际进度条加上右侧圆角
if (data.actual < data.projected) {
  projectedPercentage = ((data.projected - data.actual) / barLength) * 100;
} else {
  actualProgress.style.borderRadius = "0 500px 500px 0";
}

actualProgress.style.width = `${actualPercentage}%`;
projectedProgress.style.width = `${projectedPercentage}%`;

调整逻辑说明 #

• 容器.progress设置整体胶囊圆角，再加overflow: hidden，保证内部进度条的边角不会突破容器的圆角样式，维持整体的胶囊外观。
• 实际进度条去掉右侧圆角，让它的右边缘是直角，这样就能和预计进度条的左边缘完全贴合，彻底消除缝隙。
• 只有预计进度条保留右侧圆角，确保整个进度条的右侧还是符合设计要求的胶囊样式。
• 新增的JS判断可以覆盖实际数据大于等于预计数据的情况，这时候直接给实际进度条加上右侧圆角，同时隐藏预计进度条，避免样式错乱。

这样调整后，浅紫色的预计部分就能完全填满深紫色实际部分留下的空隙，同时你依然可以通过百分比来统一控制两个进度条的宽度，完美符合你的需求！

内容的提问来源于stack exchange，提问作者Jake Conkerton-Darby