我正在使用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>
解决方法
您不需要任何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>';