html - 我怎样才能通过使用 Bootstrap 网格来实现它？

Question

上图显示了这就是我想要制作它的方式。我有对齐显示问题并且没有显示线条。我怎样才能实现与 Bootstrap 网格一起使用。我希望它做出响应。请告知我在哪里犯了错误，我怎样才能让它发生。 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 并移除所有嵌套的列。

工作示例:以整页打开

/*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>