我怎樣才能通過使用引導網格？

Question

上圖顯示了這是我想如何使它。我有對齊顯示問題和行不顯示。我怎麼才能實現與引導網格使用。我希望它做出響應。請告知我在哪裏犯錯，我怎麼能讓它發生。 plunker link

我婉看到這樣

<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

使用列acheive等欄目內對齊並沒有真正太大的意義時，你可以簡單地使用display屬性使用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>