Php 我想显示类别页面像在图像中，但不能显示按照我的要求

我想像上面的图片一样显示类别，但我得到的输出像第二张图片一样，我的代码如下，请仔细阅读

**这里显示的是我的查看页面代码**

 <div class="container">
        <div class="row">
            <?php foreach ($MoreListMenuLevel1 as $menu1) { ?>
                <?php if (count($this->Categories_model->listsector1($menu1->id)) > 0) {
                    ?>
                    <div class="main-category-width">

                        <h4><a href="<?php echo base_url(); ?>index.php/welcome/onSectorClick1?id=<?php echo $menu1->id; ?>&name=<?php echo $menu1->sub1_category_name; ?>"><?php echo $menu1->sub1_category_name; ?></a></h4>

                        <ul>
                            <?php foreach ($this->Categories_model->Morelistsector2($menu1->id) as $menu2) { ?>
                                <li><a href="<?php echo base_url(); ?>index.php/welcome/onSectorClick2?id=<?php echo $menu2->id; ?>&name=<?php echo $menu2->sub2_category_name; ?>"> <?php echo ucwords($menu2->sub2_category_name); ?></a></li>
                            <?php } ?> 
                        </ul>
                    </div>
                    <?php
                }
            }
            ?> 
        </div>
    </div>

这里有一个解决方案

砌体是一个JavaScript网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石匠在墙上安装石头。你可能已经看到它在互联网上被广泛使用

---

你可以用这个。检查上面的链接。

真的吗？您想显示如图所示的类别，但获得如图所示的输出吗？哪张图片？就像第一张图片一样，实际上我使用的是引导网格系统。你可以使用砌体布局和引导网格系统。请再检查一次。它与引导很好。我想要css和js的CDN链接

#modal-nav-wrap {
    position: fixed;
    top: 0;
    background: #fff;
    padding: 70px 50px;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    overflow-y:scroll;
}
.main-category-width {
    width: 19%;
    display: inline-block;
    margin: 1% auto;
    vertical-align: top;
}
.main-category-width h4 a {
    color: #f43a43;
    text-transform: capitalize;
}
.main-category-width ul li {
    padding: 7px;
}
.main-category-width ul li a {
    color: #333;
}