douya7309 2018-11-01 09:49
浏览 101

CSS bootstrap计算列数

I'm redesigning my website, and I want to display records in a table 4 rows across and down however many rows it needs.

I've got this script which I've been toying around with for hours, but I'm not getting the desired result. In fact, it's just listing row after row.

<div class="row">
<div class="col-3 col-12-medium">

<?php 
$finditems="Coffee Mugs - Ceramic";
$servername = '';
$username   = '';
$password   = '';
$dbname     = '';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}$sql = "SELECT * FROM inventory WHERE product_subcategory LIKE '$finditems' 
AND(product_active='Y' OR product_active='C' OR product_active='O') AND 
web_sale<>'N' ORDER BY product_name ASC";
$result = $conn->query($sql);

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
    echo "<div class=''col-3 col-12-medium'>". $row["product_name"]. "  " . 
$row["product_code"]. " $" . $row["product_p1"]. "<br><img 
src='products/".$row['product_code'].".jpg' width='100' height='100'> 
</div>";
    }
} else {
echo "0 results";
}
?>
</div><div>

Some of the results may find only 2 items, others might show 10 (depending on the search term). So when there is multiple, it shows the next item to the right, until the row of 4 is filled, then it goes to the next row. I know i'm missing something for it to calculate it, but I just ain't finding it.

Your help will be appreciated.

  • 写回答

1条回答 默认 最新

  • doufenzhu7012 2018-11-01 12:13
    关注

    for Medium screen devices It should be like

    <div class="col-md-3">....</div>
    

    include this in all div which you wanted to things in a column. and of you wanted to responsive website just add this

    <div class="col-sm-1 col-md-3 col-lg-4">....</div>
    

    change numbers according your need.

    评论

报告相同问题?

悬赏问题

  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 flask项目,怎么使用AJAX传数据库数据到echarts图表的data里,实现异步加载数据。
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题