使用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）

希望我幫助;）