使用 Smarty 修复响应式 Bootstrap 列

Question

我正在使用 PHP、Smarty 和 Bootstrap 制作视频库。在超小屏幕上它会显示一列，在小屏幕上我想显示 2 列，除此之外我想显示 3 列

内容是动态生成的，因此它不会始终具有相同的高度，因此我需要使用额外的行或添加 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>

问题是 smarty 不知道屏幕大小和要显示的列数，所以我无法计算如何添加 clearfix 重置或将信息拆分成几行...关于如何解决的任何想法这个问题？

Answer 1

我前段时间做过类似的事情。我添加了 classes: col-xs-12 col-sm-4 col-md-4 col-lg-2 到 div 并添加了行 class 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)

希望我能帮到你 ;)

使用 Smarty 修复响应式 Bootstrap 列

Responsive Bootstrap column fix using Smarty

html

php

smarty3

twitter-bootstrap