Spalten mit der gleichen Höhe und einer Hintergrundfarbe mit Bootstrap

Question

Arbeiten mit Bootstrap 3. Ich habe zwei col (col-md-8 und col-md-4), die die gleiche Höhe haben. (Danke an ein kleines Schnipsel finden Sie hier :))

Das ist ok, es funktioniert. Aber ich brauche sie eine Hintergrundfarbe haben. Das Problem ist - und in der Tat ist es normal -, dass die beiden Farben nebeneinander liegen und ich deshalb keine weiße Rinne zwischen ihnen habe.

Ich kann versuchen, mit einem "inneren" div in jedem col. aber dann brauche ich diese innere div die gleiche Höhe wie die Eltern haben.

ihr das Ergebnis: You can see the gutters filled with the background color

@media only screen and (min-width : 768px) { 
 
    .is-table-row { 
 
    display: table; 
 
    } 
 
    .is-table-row [class*="col-"] { 
 
    float: none; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    } 
 
} 
 
.red { 
 
    background: red; 
 
} 
 
.green { 
 
    background: green; 
 
}

 

 
<div class="container"> 
 
    <div class="row is-table-row"> 
 
    <div class="col-md-8 red"> text </div> 
 
    <div class="col-md-4 green"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> 
 
    </div> 
 
</div> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Können Sie mir bitte helfen?

Answer 1

das ist, wie ich vor allem Probleme wie diese lösen:

<div class="row is-table-row"> 
    <div class="col-md-8 red"> 
     <div class="inner"> 
      text 
     </div> 
    </div> 
    <div class="col-md-4 green"> 
     <div class="inner"> 
      text 
     </div> 
    </div> 
</div> 

Und die CSS ist:

.red .inner{ 
    background: red; 
} 
.green .inner{ 
    background: #343335; 
} 
.red, .green{ 
    padding: 10px; 
} 

Ich weiß nicht, ob das die beste Lösung, aber es macht den Job

Answer 2

Zur gleichen Höhe auf Bootstrap Spalten erreichen Sie können versuchen, diese:

.same-height { 
 
    position: relative; 
 
} 
 

 
.same-height .red, 
 
.same-height .green { 
 
    position: static; 
 
} 
 

 
.same-height .red:before, 
 
.same-height .green:before{ 
 
    position: absolute; 
 
    content: ''; 
 
    z-index: -1; 
 
    bottom: 0; 
 
    top: 0; 
 
} 
 

 
.same-height .red:before { 
 
    width: calc(66.66666667% - 30px); 
 
    background: red; 
 
} 
 

 
.same-height .green:before { 
 
    width: calc(33.33333333% - 30px); 
 
    background: green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container same-height"> 
 
    <div class="row"> 
 
    <div class="col-xs-8 red"> text text text text text text text text text text text </div> 
 
    <div class="col-xs-4 green">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> 
 
    </div> 
 
</div>