Bootstrap 与下面的列表项相同 space

Question

我正在尝试使用 bootstrap 创建一个列表组，但是如果该组的列数超过 4必须扩展 jsfiddle window 才能获得完整效果）

我希望它在每个列表组

下面甚至 space

这是我用来生成它的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>';
}

Answer 1

您必须一次将四个项目分组才能执行此操作。

<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应该不会太难。

Bootstrap 与下面的列表项相同 space

Bootstrap same space below list item

html

css

twitter-bootstrap