在空白进度条中放置边框

Question

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

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

我想在进度条上面加边框。

Answer 1

我不确定你要的是上面的 div 还是 actual 进度条，但我已经为两者都提供了：

.progress {
  border: 2px solid green;
}

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

<div class="progress">
  <div class="progress-bar" style="width:50%;border:2px solid red;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Answer 2

<!-- 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>

请在bootstrap

中加上borderclass

也加颜色

border-success
border-info
border-danger
border-warning
border-secondary
border-primary
border-white 等等

Answer 3

试试这个。

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

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

在空白进度条中放置边框

Put border in empty progress bar

css

border

progress-bar

bootstrap-4