1
Я использовал колонки бутстрапа для настройки макета как панели для новой бизнес-концепции. У меня есть некоторые бары прогресса, которые сидят в пределах div, однако попытка упорядочения и соответствия пяти баров оказывается сложной, если пятый бар не выпрыгнет из div. Я бы хотел, чтобы бары укладывались в div с ярлыками, сидящими сверху или рядом с барами. Вы можете помочь. Ps. идентификаторы предназначены только для изменения длины индикатора выполнения.Проблема с установочными штангами в бутстраповом столбце
Код для баров:
.container-for-bar{
border:1px solid gray;
height:12px;
width:100px;
padding:1px;
display: inline-block;
}
.bar{
background-color: purple;
width:50%; /*change this for progress*/
height: 100%;
}
.bar-text {
\t display:inline-block;
\t font-size: 12px;
}
.bar-text-top {
\t
\t font-size: 12px;
}
.progress-bar-purple {
background-color: purple;
color: black;
}
/* Bootstrap progress bars*/
.progress-bar-text {
\t float: left; text-align: center;
\t padding-left: 2px;
}
.half-unit { \t \t
\t margin-bottom: 20px;
\t padding-bottom: 4px;
\t border: 1px solid #383737;
\t background-image:url('../img/sep-half.html');
\t background-color: #D8D8D8;
\t color:black;
\t height:130px;
\t padding: 5px;
}
.tipi {
}
.purple { \t \t
\t
\t background-color: #5C005C;
\t color:white;
}
.half-unit:hover {
\t background-color: #4f4f4f;
\t -moz-box-shadow: 3px 3px 2px 0px #151515;
-webkit-box-shadow: 3px 3px 2px 0px #151515;
box-shadow: 3px 3px 2px 0px #151515;
}
.half-unit dtitle {
\t font-size:10px;
\t text-transform:uppercase;
\t color:#000000000000;
\t margin:0px;
\t padding:0px;
\t height:inherit \t
\t }
\t
.half-unit hr {
\t border: 0;
\t border-top: 1px solid #151515;
\t border-top-style: dashed;
\t margin-top:0px;
}
.half-unit h1 {
\t font-family: 'Raleway', sans-serif;
\t font-weight:300;
\t font-size: 20px;
\t line-height: 1;
\t letter-spacing: 0px;
\t color: #000000000000;
\t padding-top:10px;
\t padding-left:5px;
\t margin-top:2px;
\t text-align:center;
}
.half-unit h4 {
\t padding-left:5px;
\t margin-top:2px;
\t font-size: 13px;
\t font-weight:lighter;
\t line-height: 1;
\t letter-spacing: 0px;
\t color: #000000;
}
.half-unit bold{
\t font-family: 'Open Sans', sans-serif;
\t font-size:26px;
\t font-weight:bold;
\t color:#000000;
\t vertical-align:middle;
}
.green {
\t background-color: 'green';
}<div class="col-sm-3 col-lg-3">
\t
<div class="half-unit tipi">
<dtitle>T.I.P.I</dtitle>
<hr>
<div class="col-sm-6">
<div class="bar-text-top"> Extroversion </div>
<div class="container-for-bar">
<div class="bar" id="Extroversion_bar"></div>
</div>
<div class="bar-text-top"> Conscientiousness </div>
<div class="container-for-bar">
<div class="bar" id="Conscientiousness_bar"></div>
</div>
</div>
<div class="col-sm-6">
<div class="bar-text"> Agreeableness </div>
<div class="container-for-bar">
<div class="bar" id="Agreeableness_bar"></div>
</div>
<div class="bar-text"> Calmness </div>
<div class="container-for-bar">
<div class="bar" id="Calmness_bar"></div>
</div>
<div class="bar-text"> Openess </div>
<div class="container-for-bar">
<div class="bar" id="Openess_bar"></div>
</div>
</div>
</div>