我正在使用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>';
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。