在twitter bootstrap上使用foreach显示每行四个结果

时间:2014-10-02 16:18:26

标签: php twitter-bootstrap foreach resultset

我正在使用twitter bootstrap框架,需要使用foreach控件结构显示一个长结果集。

为了获得空间,我希望每个" bootstrap row"显示4个结果,如下所示:

<div class="row">
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
</div>

//...more bs rows

我应该如何构建php foreach结构来呈现上面的html?

由于

1 个答案:

答案 0 :(得分:1)

我认为您甚至不必手动启动新行。如果您只是在一个“行”中使用“col-md-3”类回显所有元素,它应该在4之后自动中断,并且对于响应式网站更加灵活。

像这样:

<div class="row">
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
    <div class="col-md-3">
        1 table row
    </div>
</div>