どうすればブートストラップ・グリッドを使用することができますか？

Question

上記の画像はこれをどのようにしたいのかを示しています。私はアライメント表示の問題があり、ラインが表示されません。どのように私はブートストラップグリッドを使用して達成することができます。私はそれが応答するようにしたい。私は間違いをどこにしているのか、どうすればそれが起こるのかを教えてください。私はあなたが単にdisplayプロパティを使用することができたときに、他の列内のアライメントをacheiveする列を使用し

<div class="container-fluid" style="background: white;"> 
     <div class="row"> 
      <div class="col-lg-9 col-xs-12 "> 
       <div class="parent col-md-3 col-xs-3"> 
        <div class="child circle col-md-1 col-xs-1">1</div> 
        <div class="expenseItems col-md-1 col-xs-1">Text1</div> 
        <div class="hrcol-md-1 col-xs-1"></div> 
       </div> 
       <div class="parent col-md-3 col-xs-3"> 
        <div class="child circle col-md-1 col-xs-1">2</div> 
        <div class="expenseItems col-md-2 col-xs-2">Text2</div> 
        <div class="hr col-md-1 col-xs-1"></div> 
       </div> 
       <div class="parent col-md-3 col-xs-3"> 
        <div class="child circle col-md-1 col-xs-1">3</div> 
        <div class="expenseItems col-md-2 col-xs-2">Text3</div> 
        <div class="hr col-md-1 col-xs-1"></div> 
       </div> 
       <div class="parent col-md-3 col-xs-3"> 
        <div class="child circle col-md-1 col-xs-1">4</div> 
        <div class="expenseItems col-md-2 col-xs-2">Text4</div> 
        <div class="hr col-md-1 col-xs-1"></div> 
       </div> 
      </div> 
     </div> 

このようなCSS

/*For drawing line*/ 
.hr { 
    color: gray; 
    background: gray; 
    width: 5px; 
    height: 1px; 
    margin-top:4px; 
} 


.circle 
{ 
    width: 28%; 
    border-radius: 100%; 
    text-align: center; 
    font-size: 14pt; 
    padding: 1pt; 
    position: relative; 
    background: gray; 
    color: white; 
    margin-top:11pt; 

} 
/*Parent div*/ 
.parent { 
    border-style: dashed; 
    border-width: 1px; 
    padding: 25px; 
    display:inline-block; 
    background-color:Aqua; 
} 
.child { 
    float: left; 
    background-color:Orange; 
} 
.expenseItems { 
    display: inline-block; 
    background-color:Green;  
} 

Answer 1

が本当にあまり意味がありません見てワン plunker link

column内のコンテンツでこれを行うには

display: inline-blockを使用して、すべてのネストされたcolumnsを削除します。

実施例：フルページでオープン

/*Use this rule below adjust the space between columns*/ 
 
.no-gutter > [class*='col-'] { 
 
    padding-right: 1px; 
 
    padding-left: 1px; 
 
} 
 
/*Use the above to adjust the space between columns*/ 
 

 
.parent { 
 
    border: 1px dashed red; 
 
    padding: 20px 25px 25px; 
 
} 
 
.circle { 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 50%; 
 
    padding-top: 3px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    background-color: red; 
 
    color: white; 
 
} 
 
.expenseItems { 
 
    padding: 10px; 
 
    display: inline-block; 
 
    color: red; 
 
} 
 
.hr { 
 
    background: red; 
 
    height: 2px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row no-gutter"> 
 

 
    <div class="col-sm-3"> 
 
     <div class="parent"> 
 
     <div class="circle">1</div> 
 
     <div class="expenseItems">TEXT</div> 
 
     <div class="hr"></div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-3"> 
 
     <div class="parent"> 
 
     <div class="circle">1</div> 
 
     <div class="expenseItems">TEXT</div> 
 
     <div class="hr"></div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-3"> 
 
     <div class="parent"> 
 
     <div class="circle">1</div> 
 
     <div class="expenseItems">TEXT</div> 
 
     <div class="hr"></div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-3"> 
 
     <div class="parent"> 
 
     <div class="circle">1</div> 
 
     <div class="expenseItems">TEXT</div> 
 
     <div class="hr"></div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>