css - 将边框置于空进度条中

Question

我正在使用 Bootstrap 进度栏。我的代码如下

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

我想在进度栏上方添加边框。

Answer 1

<!-- bootstrap.min.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="progress border border-success">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

请添加border Bootstrap 中的类

也添加颜色

• 边界成功
• 边框信息
• 边境危险
• 边界警告
• 次要边界
• 边框主
• 边框白色等