邊框在行和列自舉divs

Question

我已經創建了jsFiddle。我希望邊框應該在兩行線之間，但背景顏色要像在js小提琴中顯示的那樣。如何擴展此列邊界線。

我的HTML

<div class="container top5"> 
    <div class="row"> 
     <div class="col-md-12 col-xs-12"> 
      <div class="row"> 
       <div class="col-md-3 col-xs-3 inner"> 
        <div><b>Type</b></div> 
       </div> 
       <div class="col-md-3 col-xs-3 inner"> 
        <div class=""><b>SMS</b></div> 
       </div> 
       <div class="col-md-3 col-xs-3 inner"> 
        <div class=""><b>Email</b></div> 
       </div> 
       <div class="col-md-3 col-xs-3 inner-end"> 
        <div class=""><b>Business Unit</b></div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-12 col-xs-12"> 
      <div class="row border-between"> 
       <div class="col-md-3 col-xs-3 inner"> 
        <span>Another tesing text</span> 
       </div> 
       <div class="col-md-3 col-xs-3 inner"> 
        <span> test</span> 
       </div> 
       <div class="col-md-3 col-xs-3 inner"> 
        <span>Random text</span> 
       </div> 
       <div class="col-md-3 col-xs-3 inner-end"> 
        <span>Random text</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

和CSS

.top5 { 
    margin-top: 50px; 
} 

.row { 
    border: 1px solid; 
} 

.row + .row { 
    border-top:0 ; 
} 

我的小提琴 - https://jsfiddle.net/ff49tu79/13/

Answer 1

你可能想使用的填充，而不是利潤率細胞，並使用柔性框彎曲股利細胞一起

.top5 { 
 
    margin-top: 50px; 
 
} 
 

 
.row { 
 
    border: 1px solid; 
 
} 
 

 
.row + .row { 
 
    border-top: 0; 
 
} 
 

 
.flx { 
 
    display: flex; 
 
} 
 

 
.inner { 
 
    background: aliceblue; 
 
    border-right: 1px solid blue; 
 
    padding: 10px 15px; 
 
} 
 

 
.inner-end { 
 
    background: aliceblue; 
 
    padding: 10px 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container top5"> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-xs-12"> 
 
     <div class="row"> 
 
     <div class="flx"> 
 

 

 
      <div class="col-md-3 col-xs-3 inner"> 
 
      <div><b>Type</b></div> 
 
      </div> 
 
      <div class="col-md-3 col-xs-3 inner"> 
 
      <div class=""><b>SMS</b></div> 
 
      </div> 
 
      <div class="col-md-3 col-xs-3 inner"> 
 
      <div class=""><b>Email</b></div> 
 
      </div> 
 
      <div class="col-md-3 col-xs-3 inner-end"> 
 
      <div class=""><b>Business Unit</b></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12 col-xs-12"> 
 
     <div class="row border-between"> 
 
     <div class="flx"> 
 
      <div class="col-md-3 col-xs-3 inner"> 
 
      <span>Another tesing text</span> 
 
      <div>1</div> 
 
      <div>2</div> 
 
      </div> 
 
      <div class="col-md-3 col-xs-3 inner"> 
 
      <span> test</span> 
 
      </div> 
 
      <div class="col-md-3 col-xs-3 inner"> 
 
      <span>Random text</span> 
 
      </div> 
 
      <div class="col-md-3 col-xs-3 inner-end"> 
 
      <span>Random text</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

See JSFIDDLE