html - 在列表项下方 Bootstrap 相同的空间

标签 html css twitter-bootstrap

我试图用 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/

相关文章:

javascript - 缓存过期 header CSS 和 JS 不工作

javascript - Angular Bootstrap 模态正在将整个页面加载到模态 (13.0)

javascript - 在 Bootstrap 中以模态加载轮播中的特定幻灯片

ruby-on-rails-3 - Haml Bootstrap 搜索表单

javascript - 将 JavaScript 对象发送到其他页面

javascript - 如何使用透明背景为本 map 标图像着色?

html - Http 媒体流服务器

html - 先前的 DIV 关系

html - 使用 2 个 SVG 图标应用类似的填充效果

html - 具有继承参数的 LESS 嵌套规则