Bootstrap Row auseinander bricht auf mobilen

Question

ich eine Reihe von 4 Produkten haben, im Wesentlichen wie so:

<div class="row"> 

    <div class="col-xs-6 col-sm-3"> 

    <div class="image"> 
     <img src="..."> 
    </div> 
    <div class="text"> 
     Text here 
    </div> 

    </div> 
    <div class="col-xs-6 col-sm-3"> 

    <div class="image"> 
     <img src="..."> 
    </div> 
    <div class="text"> 
     Text here 
    </div> 

    </div> 
    <div class="col-xs-6 col-sm-3"> 

    <div class="image"> 
     <img src="..."> 
    </div> 
    <div class="text"> 
     Text here 
    </div> 

    </div> 
    <div class="col-xs-6 col-sm-3"> 

    <div class="image"> 
     <img src="..."> 
    </div> 
    <div class="text"> 
     Text here 
    </div> 

    </div> 

</div> 

Das sieht gut aus auf dem Desktop:

jedoch auf mobilen sie bricht auseinander:

Alle Bilder haben die gleiche Höhe, daher denke ich, dass dies auf die unterschiedlichen Länge der Untertitel zurückzuführen ist. Ich möchte keine feste Höhe auf der <div class="text"> haben, da ich nicht garantieren kann, dass die Beschriftung darin passt.

Gibt es einen cleveren Weg in CSS (oder jQuery wenn muss), um die Höhe der Beschriftungen gleich der höchsten Überschrift in der Zeile zu setzen? Dies müsste auch auf Browser-Größe ausgelöst werden.

Dank

Answer 1

Es ist eigentlich jede n-te Reihe clearfix Elemente verwenden, die nur an bestimmten Haltepunkten angezeigt.

<div class="clearfix visible-xs-block"></div>

Jedes zweite Element, setzen dieses clearfix Element, und Sie es visible-xs-block einstellen können so auf xs also erscheint nur.

<div class="col-xs-6 col-sm-3"> 
    /* .. */ 
</div> 
<div class="col-xs-6 col-sm-3"> 
    /* .. */ 
</div> 
<div class="clearfix visible-xs-block"></div> 
<div class="col-xs-6 col-sm-3"> 
    /* .. */ 

.. und so weiter.

A clearfix ist ein Weg für ein Element, um automatisch die untergeordneten Elemente zu löschen

von Madara Uchiha