Наличие нескольких индикаторов в Bootstrap с левой меткой, толкающей вправо

Question

Я хочу иметь несколько индикаторов выполнения, используя Bootstrap 4 с метками или, по крайней мере, текст слева от него. Пока это работает, но с несколькими барами, это похоже на перевернутую лестницу.

В настоящее время в качестве кода используется следующее:

    <div class="container">
      <p class="progress-label">
        C#
      </p>
      <div class="progress" id="prog1">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
    </div>
    <div class="container">
      <p class="progress-label">
        C#
      </p>
      <div class="progress" id="prog1">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
    </div>

с CSS

.progress-label {
  float: left;
  margin-right: 1em;
}  

взято из Как поставить метку рядом с индикатором выполнения с bootstrap?
Пока я не уверен, что я могу сделать, чтобы она работала правильно, с выравниванием обеих полос.

Вот скрипка :

Answer 1

Попробуйте обернуть каждый индикатор выполнения в элементе div с классом «progressHolder» Затем в CSS просто добавьте «переполнение: скрытый», так как вы использовали «float: left» в «метке прогресса».

HTML Код:

<div class="container">
   <div class="progressHolder">
     <p class="progress-label">
       C#
     </p>
     <div class="progress" id="prog1">
       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
         aria-valuemax="100" style="width: 40%">
         <span class="sr-only">20% Complete</span>
       </div>
     </div>
   </div>
 </div>
 <div class="container">
   <div class="progressHolder">
     <p class="progress-label">
       C#
     </p>
     <div class="progress" id="prog2">
       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
         aria-valuemax="100" style="width: 40%">
         <span class="sr-only">20% Complete</span>
       </div>
     </div>
   </div>
 </div>

CSS Код:

.progressHolder {
  overflow: hidden;
}

.progress-label {
  float: left;
  margin: -5px 15px 15px 0;
}  

Демонстрация: https://codepen.io/Bibeva/pen/RwNMjNB

Answer 2

Также установите .container на float: left

Я добавил калибр c на margin-top, чтобы центрировать текст с помощью индикатора выполнения

.container {
  float:left;
}

.progress {
  margin-top: 1rem;
}

.progress-label {
  float: left;
  margin-top: calc(1rem - 4px);
  margin-right: 1em;
}  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <p class="progress-label">C#</p>
  <div class="progress" id="prog1">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">20% Complete</span>
    </div>
  </div>
</div>
<div class="container">
  <p class="progress-label">C#</p>
  <div class="progress" id="prog2">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">20% Complete</span>
    </div>
  </div>
</div>

Answer 3

Используйте <label> вместо <p> в progress-label

Answer 4

некоторые пункты, о которых следует позаботиться:

• container класс не рекомендуется использовать с внутренними элементами, он предназначен для макета, см. Эту ссылку: https://getbootstrap.com/docs/4.4/layout/overview/#containers
• Идентификатор должен быть уникальным, его нельзя использовать для нескольких элементов. Используйте классы для многоцелевого использования.

Я предлагаю использовать эти стили css для достижения того, что вам нужно.

.container{
   margin: 10px;
}
.progress-label{
   padding: 0px 10px;
   float: left;
   margin-bottom: 0px;
   top: -4px;
   position: relative;
}