Question

我必须将数据从数据库中提取到列中，但总列数加起来超过12.列的高度不同。这弄乱了网格。有谁知道如何解决这个问题？

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

Answer 1

选项1 是为所有<div>添加标准高度。所以你可以创建一个像.div-200px这样的类。

将您的<div class="col-md-3">更改为<div class="div-200px col-md-3">

编辑CSS：

 .div-200px {
     height: 200px; 
}

选项2 是创建一个foreach循环，并为每4个产品添加一个新的<div class="row">。

<div class="container">
    <?php $count = 0;
    foreach($data as $item){
        if(is_int($count/4)){ ?>
            <div class="row">
        <?php } ?>
            <div class="col-md-3"> <?=$item?> </div>
        if($count>0 AND is_int($count/4)){ ?>
            </div>
        <?php } 
        $count++;
    } ?>
</div>

这不是最漂亮的东西，但应该有效。

Answer 2

CSS还有另一个选项，在你的col-md-3 div中添加一个“item”类，并给它以下css：

.item:nth-child(4n+1){
    clear:left
}

Answer 3

我认为你根本不应该用bootstrap网格系统来解决这个问题。只需使用<table>标记，然后停止关注多个列。反应不应该受到影响

Bootstrap加起来超过12个

3 个答案: