Bootstrap das Gitter bricht, wenn der Text groß ist

Question

Ich hatte dieses Problem mehrere Male konfrontiert und ich konnte keine richtige Lösung finden. Grundsätzlich habe ich ein Bootstrap-Gitter mit 2 Spalten nebeneinander mit Text (und sagen wir 4 Reihen). Wenn eines der Elemente im Raster einen großen Text enthält, bricht das Raster und zeigt das folgende Element nicht an der richtigen Position.

Here is the example. Sie können sehen, dass es unter Telefonunterstützung bricht (wenn Sie es in einem col-md> Bildschirm sehen)

Meine Lösung war, die Min-Höhe des Elements als die maximale Höhe des größeren Textes und in So funktioniert es, aber es ist nicht die optimale Lösung. Irgendwelche Ideen?

Answer 1

können Sie Klasse klar fix nach den Elementen

gesetzt und Sie können in Ihren Medien, was einen Satz in einer Reihe

zum Beispiel

//sass file 
 

 
//this code set two element in a row 
 

 
.clearfix{ 
 
    &:nth-of-type(n){ 
 
    display: none; 
 
    } 
 

 
    &:nth-of-type(4n){ 
 
    display: block; 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <a href="#"> 
 
     <img src="" alt="" /> 
 
     </a> \t \t \t \t \t \t 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div class="col-sm-4"> 
 
     <a href="#"> 
 
     <img src="" alt="" /> 
 
     </a> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div class="col-sm-4"> \t \t \t \t \t \t \t \t \t \t \t 
 
     <a href="#"> 
 
     <img src="" alt="" /> 
 
     </a> \t \t \t \t \t \t \t \t \t 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
</div>