Как я могу сделать это с помощью загрузочной сетки?

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

Использование столбцов для того чтобы достигнуть выравнивания внутри других столбцов на самом деле не имеет большого смысла, когда вы можете просто использовать 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>