Rand in Zeile und Spalten von Bootstrap divs

Question

Ich habe eine jsFiddle erstellt. Ich möchte, dass die Grenze zwischen beiden Zeilenlinien aber Hintergrundfarbe ist, um zu mögen, was es in js Geige zeigt. Wie kann ich diese Spaltengrenze verlängern?

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

Und Css

.top5 { 
    margin-top: 50px; 
} 

.row { 
    border: 1px solid; 
} 

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

Mein Fiddle - https://jsfiddle.net/ff49tu79/13/

Answer 1

Sie zusammen verwenden padding statt Marge in Zellen und verwenden Flex-Box zu biegen, um die div Zellen wollen können

.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