Responsive Bootstrap-Spalte reparieren mit Smarty

Question

Ich mache eine Video-Galerie mit PHP, Smarty und Bootstrap. Auf extra kleinen Bildschirmen wird eine Spalte angezeigt, auf kleinen Bildschirmen möchte ich 2 Spalten anzeigen und darüber hinaus möchte ich 3 Spalten anzeigen

Der Inhalt wird dynamisch generiert, und deshalb wird es nicht immer die gleiche Höhe haben , so muss ich die missaligment mit zusätzlichen Zeilen korrigieren oder hinzufügen clearfix

hier ist mein hTML-Code zurücksetzt:

<div class="row nopadding"> 
    {foreach $hoteles as $hotel} 
     <div class="col-sm-6 col-md-4"> 
      <div class="hotel"> 
       <div class="player"> 
        <img src="http://img.youtube.com/vi/{$hotel['yid']}/mqdefault.jpg" alt="" class="img-responsive"> 
        <a href="index/detalle/{$hotel['id']}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></a> 
       </div> 
       <div class="movil"> 
        <h1>{$hotel['titulo']}</h1> 
        <p class="distancia">{$hotel['distancia']}</p> 
        <div style="clear: both"></div> 
        <p>{$hotel['mensaje']}</p> 
        <ul class="extras"> 
         {foreach $hotel['extras'] as $extras}<li><span>{$extras}</span></li>{/foreach} 
        </ul> 
       </div> 
      </div> 
     </div> 
    {/foreach} 
</div> 

Das Problem ist, dass smarty nicht die Bildschirmgröße nicht kennt und das Anzahl der anzuzeigenden Spalten, daher kann ich nicht berechnen, wie man die Clearfix-Resets hinzufügt oder die Informationen in mehrere Zeilen aufteilt ... irgendwelche Ideen, wie man dieses Problem löst?

Answer 1

Ich habe vor einiger Zeit etwas sehr ähnliches getan. I hinzugefügt Klassen: col-XS-12 col-SM-4 col-md-4 col-lg-2 bis DIV und hinzugefügt Reihe Klasse für jede der 6.

Zum Beispiel:

<div class="row nopadding"> 
{foreach $hoteles as $hotel name="hotels"} 
    {if $smarty.foreach.hotels.iteration %6 == 0} 
     <div class="row"> 
    {/if} 
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2"> 
     <div class="hotel"> 
      <div class="player"> 
       <img src="http://img.youtube.com/vi/{$hotel['yid']}/mqdefault.jpg" alt="" class="img-responsive"> 
       <a href="index/detalle/{$hotel['id']}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></a> 
      </div> 
      <div class="movil"> 
       <h1>{$hotel['titulo']}</h1> 
       <p class="distancia">{$hotel['distancia']}</p> 
       <div style="clear: both"></div> 
       <p>{$hotel['mensaje']}</p> 
       <ul class="extras"> 
        {foreach $hotel['extras'] as $extras}<li><span>{$extras}</span></li>{/foreach} 
       </ul> 
      </div> 
     </div> 
    </div> 
    {if $smarty.foreach.hotels.iteration %6 == 0} 
     </div> 
    {/if} 
{/foreach} 

Nun zeigt es 1 Punkt, wenn Bildschirm sehr klein ist (col-XS-12), 3 Einzelteile, als Bildschirm-Medium (col-SM-4 col-md-4) ist, und 6 Elemente, wenn der Bildschirm groß ist (col-lg-2)

Hoffe, dass ich geholfen;)