Bootstrap 4 Рейтинг с индикатором выполнения - PullRequest
Новая
       10

Bootstrap 4 Рейтинг с индикатором выполнения

0 голосов
/ 06 января 2020

Использование Bootstrap 4. Я хочу добиться этого:

enter image description here

Игнорировать "Просмотреть все" и "Рейтинги 4,327"

В итоге я получил только это:

enter image description here

Не имеет значения рейтинг 5, 4, 3 .... Я могу легко заменить их значками шрифтов.

Вот мой код: 

 <h4>Ratings and Reviews</h4>
 <div class="d-flex">
   <div class="text-center">
     <span class="display-4 font-weight-bolder">3.1</span><br>
     <span class="text-black-50">out of 5</span>
   </div>
   <div class="flex-grow-1">
     <div class="row">
       <div class="col-4 text-right">
         5
       </div>
       <div class="col-8">
         <div class="progress" style="height: 2px;">
           <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
       </div>
     </div>
     <div class="row">
       <div class="col-4 text-right">
         4
       </div>
       <div class="col-8">
         <div class="progress" style="height: 2px;">
           <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
       </div>
     </div>
     <div class="row">
       <div class="col-4 text-right">
         3
       </div>
       <div class="col-8">
         <div class="progress" style="height: 2px;">
           <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
       </div>
     </div>
     <div class="row">
       <div class="col-4 text-right">
         2
       </div>
       <div class="col-8">
         <div class="progress" style="height: 2px;">
           <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
       </div>
     </div>
     <div class="row">
       <div class="col-4 text-right">
         1
       </div>
       <div class="col-8">
         <div class="progress" style="height: 2px;">
           <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
       </div>
     </div>
   </div>
 </div>

Как мне: - Сделать индикатор выполнения вертикально посередине по центру с текстом / звездочкой. - Смотрите, что я использую Row / Col, но я бы предпочел использовать вместо этого flexbox. - При минимально возможном CSS.

1 Ответ

1 голос
/ 06 января 2020

Добавьте класс align-items-center ко всем row элементам. По умолчанию строки используют flexbox в Bootstrap v4 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<h4>Ratings and Reviews</h4>
<div class="d-flex">
  <div class="text-center">
    <span class="display-4 font-weight-bolder">3.1</span><br>
    <span class="text-black-50">out of 5</span>
  </div>
  <div class="flex-grow-1">
    <div class="row align-items-center">
      <div class="col-4 text-right">
        5
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-4 text-right">
        4
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-4 text-right">
        3
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-4 text-right">
        2
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-4 text-right">
        1
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
  </div>
</div>
...