自举列我的代码之间

Question

requirement

添加图标

<div class="col-md-8"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div class="row"> 
 
      <div class="col-md-2"> 
 
       <small> 
 
       </small> 
 
      </div> 
 
      <!--similar 5 more columns--> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-2 goldenYellow"> 
 
       <small> 
 
       HB GRANDI REYK,ICELAND, TD(GMT+2) 10:11 31/072017 
 
       </small> 
 
      </div> 
 
      <!--similar 5 more columns--> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

看起来像这样 my present image

我想添加自定义图标的div之间或右箭头在末尾od每个div

Answer 1

可以使用CSS每个COL

/*.goldenYellow:after { 
 
    left: 70%; 
 
    top: 30px; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    border-color: rgba(136, 183, 213, 0); 
 
    border-left-color: #88b7d5; 
 
    border-width: 30px; 
 
    margin-top: -30px; 
 
} 
 
*/ 
 
.icon-right-open{ 
 
    position: absolute; 
 
    right: 0; 
 
    top: 30px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    
 
    border-left: 20px solid green; 
 
}

<div class="col-md-8"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="col-md-2"> 
 
      <small> 
 
      </small> 
 
     </div> 
 
     <!--similar 5 more columns--> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-2 goldenYellow"> 
 
      <i class="icon-right-open"></i> 
 
      <small> 
 
       HB GRANDI REYK,ICELAND, TD(GMT+2) 10:11 31/072017 
 
</small> 
 
     </div> 
 

 
     <!--similar 5 more columns--> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>