在列表项下面引导相同的空格

时间:2015-01-13 09:01:44

标签: html css twitter-bootstrap

我试图用引导程序创建一个列表组,但是如果该组有超过4个coloumns,那么它将所有正在进行的框放在这个jsfiddle http://jsfiddle.net/e9he43cs/1/上非常奇怪(你可能需要扩展jsfiddle窗口)获得完整的效果)

我希望它在每个列表组下面都有空格

继承人我用它来生成它

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>';
}

1 个答案:

答案 0 :(得分: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>

查看您的更新小提琴:http://jsfiddle.net/e9he43cs/2/

在PHP中不应该太难。