Поместите границу в пустой индикатор выполнения - PullRequest
Новая
       89

Поместите границу в пустой индикатор выполнения

1 голос
/ 03 августа 2020

Я использую Bootstrap Индикатор выполнения. Мой код выглядит так: 

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

Я хотел бы поставить границу над индикатором выполнения.

Ответы [ 3 ]

2 голосов
/ 03 августа 2020 

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

Также добавьте цвет

  • border-success
  • border-info
  • border-danger
  • border-warning
  • border-secondary
  • border-primary
  • border-white эт c
1 голос
/ 03 августа 2020

Попробуйте это. 

<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>
1 голос
/ 03 августа 2020

Я не уверен, что вы запрашиваете верхний 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>
...