Как вертикально выравнивать индикатор выполнения в Twitter Bootstrap?

Я использую контроль прогресса в twitter-bootstrap.

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

Я нашел этот поток, но я боюсь, что он не работает сейчас.

Итак, я делаю это: http://tinker.io/e69ff/2

HTML

<br>
<div class="progress vertical">
  <div class="bar bar-success" style="width: 70%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

CSS

.progress.vertical {
    position: relative;
    width: 20px;
    min-height: 240px;
    float: left;
    margin-right: 20px;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: none;
}

У вас есть подсказка или совет, чтобы получить его? Если вам нужна дополнительная информация, сообщите мне, и я отредактирую сообщение.

Ответы

Ответ 1

Bootstrap 2

Обратите внимание, что это решение для бутстрапа 2:

ширина 100%, высота:

<br>
<div class="progress vertical">
  <div class="bar bar-success" style="height: 70%;width:100%"></div>
  <div class="bar bar-warning" style="height: 20%;width:100%"></div>
  <div class="bar bar-danger" style="height: 10%;width:100%"></div>
</div>

Bootstrap 3 +

Я хотел бы, чтобы вы ссылались на другие комментарии на этой странице

Ответ 2

Bootstrap 3 и Bootstrap 4.

Демо: https://jsfiddle.net/elijahmurray/7tgh988z/

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

В этом решении также не используется transform, который, по моему мнению, очень сильно перепутал с позиционированием при его использовании. Не говоря уже, это просто сбило с толку.

HTML

<div class="progress progress-bar-vertical">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

CSS

.progress-bar-vertical {
  width: 20px;
  min-height: 100px;
  margin-right: 20px;
  float: left;
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  align-items: flex-end;
  -webkit-align-items: flex-end; /* Safari 7.0+ */
}

.progress-bar-vertical .progress-bar {
  width: 100%;
  height: 0;
  -webkit-transition: height 0.6s ease;
  -o-transition: height 0.6s ease;
  transition: height 0.6s ease;
}

Голосовать, если это было полезно!

Ответ 3

это будет работать:

.progress{
  transform: rotate(-90deg);
}

http://codepen.io/mcgraw/pen/eCwvu

Ответ 4

Изменение полосы хода бутстрапа twitter и анимации из горизонтального положения в вертикальное положение

=============================================== =========================

HTML

<div class="progress progress-vertical progress-striped active progress-success">
    <div class="bar" style="width: 40px;"></div>
</div>
<div class="progress progress-vertical progress-striped active progress-danger">
    <div class="bar" style="width: 40px;"></div>
</div>

CSS

.progress-vertical {
position: relative;
width: 40px;
min-height: 240px;
float: left;
margin-right: 20px; }

Измените файл bootstrap.css Twitter как указано ниже:

        @-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}
@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}
@-ms-keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 40px;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}

Измените background-repeat на repeat-y и степень 0deg. так что анимация отображает вертикально

    .progress-danger .bar,
    .progress .bar-danger {
      background-repeat: repeat-y;
      }

.progress-danger.progress-striped .bar,
.progress-striped .bar-danger {
  background-color: #ee5f5b;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

Следуйте этим же другим типам прогресса, таким как успех, предупреждение и т.д. и достигните вертикальных черт бутстрапов и анимаций...!

Если у вас есть какие-либо вопросы, дайте мне знать, я могу вам помочь..!

Если у кого-то есть какое-то оптимизированное решение, чем это, пожалуйста, дайте мне знать..!

Не забудьте поддержать это решение..!

Наслаждайтесь!