我试图用 bootstrap 创建一个列表组,但如果该组有超过 4 个列,那么它会将所有正在进行的框放置得非常奇怪,如在这个 jsfiddle 上看到的那样 http://jsfiddle.net/e9he43cs/1/ (您可能必须扩展 jsfiddle 窗 Eloquent 能获得完整效果)
我希望它在每个列表组下方留出均匀的空间
这是我用来生成它的 php
while($row = $result->fetch_object()){
echo '<div class="list-group col-sm-3">';
echo '<a href="#" class="list-group-item">';
echo '<h4 class="list-group-item-heading">'.$row->name.'</h4>';
echo '<p class="list-group-item-text">'.$row->description.'</p>';
echo '</a>';
$itemResult = $con->query("SELECT * FROM categories_items WHERE categori='$row->id'")or die($con->error);
while($itemRow = $itemResult->fetch_object()){
echo '<a href="'.$itemRow->link.'" class="list-group-item">';
echo $itemRow->name;
echo '</a>';
}
echo '</div>';
}
最佳答案
您必须一次将四个元素分组才能执行此操作。
<div class="row">
<div class="list-group col-sm-3">...</div>
<div class="list-group col-sm-3">...</div>
<div class="list-group col-sm-3">...</div>
<div class="list-group col-sm-3">...</div>
</div>
<div class="row">
<div class="list-group col-sm-3">...</div>
<div class="list-group col-sm-3">...</div>
<div class="list-group col-sm-3">...</div>
<div class="list-group col-sm-3">...</div>
</div>
查看更新后的 fiddle :http://jsfiddle.net/e9he43cs/2/
在 PHP 中应该不会太难。
关于html - 在列表项下方 Bootstrap 相同的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27918291/