html - bootstrap col 中的拟合条出现问题

Question

我使用 bootstrap 列将布局设置为新业务概念的仪表板。我有一些位于 div 中的进度条，但是如果没有第五个条跳出 div，尝试排序和适合五个条被证明是困难的。我希望条形图堆叠在 div 中，标签位于条形图的顶部或旁边。你能帮忙吗？附言。 ID 仅用于更改进度条的长度。

条形码是:

.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 {

	display:inline-block;
	font-size: 12px;

}
.bar-text-top {

	
	font-size: 12px;

}
.progress-bar-purple {
background-color: purple;
color: black;

}

/* Bootstrap progress bars*/

.progress-bar-text {

	float: left; text-align: center;
	padding-left: 2px;
}

.half-unit {		
	margin-bottom: 20px;
	padding-bottom: 4px;
	border: 1px solid #383737;
	background-image:url('../img/sep-half.html');
	background-color: #D8D8D8;
	color:black;
	height:130px;
	padding: 5px;
}

.tipi {


}

.purple {		
	
	background-color: #5C005C;
	color:white;

}
.half-unit:hover {
	background-color: #4f4f4f;
	-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 {
	font-size:10px;
	text-transform:uppercase;
	color:#000000000000;
	margin:0px;
	padding:0px;
	height:inherit	
	}
	
.half-unit hr {
  	border: 0;
  	border-top: 1px solid #151515;
  	border-top-style: dashed;
	margin-top:0px;
}

.half-unit h1 {
	font-family: 'Raleway', sans-serif;
	font-weight:300;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0px;
	color: #000000000000;
	padding-top:10px;
	padding-left:5px;
	margin-top:2px;
	text-align:center;
}

.half-unit h4 {
	padding-left:5px;
	margin-top:2px;
	font-size: 13px;
	font-weight:lighter;
	line-height: 1;
	letter-spacing: 0px;
	color: #000000;
}


.half-unit bold{
	font-family: 'Open Sans', sans-serif;
	font-size:26px;
	font-weight:bold;
	color:#000000;
	vertical-align:middle;
}

.green {

	background-color: 'green';
}

<div class="col-sm-3 col-lg-3">
            	

               <div class="half-unit tipi">
                 <dtitle>T.I.P.I</dtitle>
                 <hr>
                 <div class="col-sm-6">
                     <div class="bar-text-top">&nbsp;&nbsp;Extroversion&nbsp;</div>
                     <div class="container-for-bar">

                       <div class="bar" id="Extroversion_bar"></div> 
                   </div>
                   <div class="bar-text-top">&nbsp;&nbsp;Conscientiousness&nbsp;</div>

                   <div class="container-for-bar">

                    <div class="bar" id="Conscientiousness_bar"></div> 
                </div>

            </div>
            <div class="col-sm-6">
               <div class="bar-text">&nbsp;&nbsp;Agreeableness&nbsp;</div>
               <div class="container-for-bar">

                <div class="bar" id="Agreeableness_bar"></div> 
            </div>
            
            <div class="bar-text">&nbsp;&nbsp;Calmness&nbsp;</div>
            <div class="container-for-bar">

                <div class="bar" id="Calmness_bar"></div> 
            </div>
           <div class="bar-text">&nbsp;&nbsp;Openess&nbsp;</div>
                <div class="container-for-bar">

                <div class="bar" id="Openess_bar"></div> 
            </div>
        </div>
    </div>

Answer 1

我分成行，然后分成列，这似乎可行。