Bootstrap радиус пользовательской границы индикатора выполнения - PullRequest
Новая
       10

Bootstrap радиус пользовательской границы индикатора выполнения

0 голосов
/ 17 февраля 2020

У меня есть следующий фрагмент: 

.progress-bar{
    border-top-right-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	  box-shadow: none !important;
}

.progress{
    border-radius: 40px !important;
    background-color: white !important;
    -webkit-box-shadow: none !important;
	  -moz-box-shadow: none !important;
	  box-shadow: none !important;
    border: 2px solid #337AB7;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>

Я не понимаю, почему у меня есть пустое пространство слева, я хотел бы избавиться от него.

White space

1 Ответ

1 голос
/ 17 февраля 2020

Это проблема рендеринга из-за границы CSS в классе .progress. Он изменяет размеры своих дочерних элементов.

В этом случае высота элемента .progress-bar фактически уменьшается на 4 пикселя из-за границы в 2 пикселя (2 пикселя сверху + 2 пикселя снизу) и, следовательно, изгиба радиус не совсем то же самое.

Вместо этого вы можете использовать box-shadow, поскольку он не изменяет размер дочерних элементов. 

.progress-bar{
    border-top-right-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	  box-shadow: none !important;
}

.progress{
    border-radius: 40px !important;
    background-color: white !important;
    
    /* Changes below */
    -webkit-box-shadow: inset 0 0 0 2px #337AB7 !important;
	  -moz-box-shadow: inset 0 0 0 2px #337AB7 !important;
	  box-shadow: inset 0 0 0 2px #337AB7 !important;
    border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>
...