使用Smarty响应引导列修复

Question

我正在使用PHP，Smarty和Bootstrap制作视频库。在额外的小屏幕上，它会显示一列，在小屏幕上，我想要显示2列和更多，我想显示3列

内容是dinamically生成的，因此它不会总是有相同的高度，所以我需要使用额外的行纠正missaligment或添加clearfix重置

这里是我的html代码：

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

的问题是，智者不知道屏幕尺寸和该显示的列数，所以我无法计算如何添加clearfix复位或将信息分成几行......有关如何解决此问题的任何想法？

Answer 1

我前段时间做了一些非常相似的事情。我添加类：COL-XS-12 COL-SM-4 COL-MD-4 COL-LG-2到的div和加入行类为每个6.

例如：

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

现在它示出了1个项目，如果屏幕是非常小的（COL-XS-12），3项当屏幕是介质（COL-SM-4 COL-MD-4）和6当屏幕很大时（col-lg-2）

希望我帮助;）