在bootstrap列之间添加图标

Question

requirement

我的代码

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

看起来像这样 my present image

我想在div之间或每个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>