Question

我正在使用SQL和PHP在一个简单的html表中创建一个充满数据的表。一切正常，但我试图在bootstrap 3列布局中将每个项目包含在自己的div中。这里的问题是这需要以非重复的顺序添加行/列。请查看jsfiddle以查看我想要实现的网格布局。

使用foreach，我可以在一个简单的表格中很好地显示数据。我的问题是什么是最好的路由使输出格式像jsfiddle？任何提示将非常感谢！我假设我需要一些JS来实现这一目标？谢谢你的时间。

注意使Javascript标签变薄以查看实际效果，否则包装。 Layout I am looking for

<!-- CODE FOR TABLE LAYOUT -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <h2>
                Database Item 1
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Database Item 2
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Database Item 3
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>
                Database Item 4
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Database Item 5
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Database Item 6 
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
    </div>
</div>

Answer 1

您不需要任何javascript，只需根据迭代次数迭代并关闭行div

echo '<div class="container-fluid">';
for($i=1; $i < count($array) + 1; $i++) {
     if(is_int(($i - 1) / 3) || ($i - 1) == 0) {
         echo '<div class="row">';
     }
     echo '<div class="col-md-4">';
     echo '<h2>'. $array[$i]['item_name'].'</h2>';
     echo '<p>'.$array[$i]['item_descrption'].'</p>';
     echo '<p><a class="btn" href="#">View details »</a></p>';
     echo '</div>';
     if(is_int($i/3) {
        echo '</div>';
     }
 }
 echo '</div>';

样式表从SQL输出到相应的引导列

1 个答案: