Html 以不同大小显示标记

如何以这种方式显示我的内容

我拥有的是一个元素数组，我希望它们像上面那样显示，我尝试过使用列表，但我不能这样做

我尝试的

 <div class="row">
           <div class="col-lg-12">
               <ul class="list-unstyled">   
                    @foreach($categories as $category)
                        <li><a href="#">{{$category->name}}</a></li>             
                    @endforeach
             </ul>
    </div>

@foreach（$categories作为$category）

@endforeach

正如@NimrodArgov所说，你应该试着从不同的角度来看待这个问题，问问自己你计划拥有多少级别的大小，以及为每个标签分配“大小”的逻辑是什么，看看你是否可以轻松地实现它的逻辑

一旦你到了那里，从UI的角度来看，这只是一个创建各种类的问题（很可能只是一个类修饰符，它将使用容器块中越来越多的基

em

（希望这对你有意义）。如果您使用的是SASS/LESS，显然可以将其作为一个简单的mixin或函数，以简化创建每个函数的过程

---

我希望这有助于你实现你想要的目标。

通常这类东西会在每个类别上使用一些权重属性。然后你可以根据每个类别的权重为其设置正确的css属性。你能提供一些示例来支持你的答案吗？那将非常好：）类别是动态生成的，就像它可能会在某个时候停止存在，如果我要对类别执行css属性，我认为这不会正常工作？@BOTJr.-你需要有一些逻辑来决定哪些东西你想要不同的尺寸。通常，这与该类别中的项目数量有关。先弄清楚。（然后学习CSS和类的基础知识）我的意思是使用一些CSS属性。您可能需要使用字体大小。例如，假设每个类别还具有一个

weight

属性，该属性是您想要的字体大小。您可以编写类似于