如何使用数据在Pug JS中生成引导列6-6
如何使用数据在Pug JS中生成引导列6-6
提问于 2019-01-24 07:46:47
我从节点Express.js框架开始，我发现
我从API中获得了类别数组，并试图使用引导程序显示这个类别的6-6列。但不知道如何实现。
我的帕格-
.col-lg-6
each category in allCategory
h6.text-uppercase #{category.name}
each subcategory in category.subcategories
li.megamenu-list-item
a.megamenu-list-link(href='/')
| #{subcategory.name}
.col-lg-6我想我的输出应该是这样的(在循环allCategory之后)-
<div class="col-lg-6"> //--> First 6 Column
<h6 class="text-uppercase">Category Name 1</h6>
<li class="megamenu-list-item">
<a class="megamenu-list-link" href="/">Subcategory Name 1</a>
<a class="megamenu-list-link" href="/">Subcategory Name 1</a>
</li>
<h6 class="text-uppercase">Category Name 2</h6>
<li class="megamenu-list-item">
<a class="megamenu-list-link" href="/">Subcategory Name 2</a>
<a class="megamenu-list-link" href="/">Subcategory Name 2</a>
</li>
</div>
<div class="col-lg-6"> //--> Second 6 Column
<h6 class="text-uppercase">Category Name 3</h6>
<li class="megamenu-list-item">
<a class="megamenu-list-link" href="/">Subcategory Name 3</a>
<a class="megamenu-list-link" href="/">Subcategory Name 3</a>
</li>
<h6 class="text-uppercase">Category Name 4</h6>
<li class="megamenu-list-item">
<a class="megamenu-list-link" href="/">Subcategory Name 4</a>
<a class="megamenu-list-link" href="/">Subcategory Name 4</a>
</li>
</div>例如，我想要这样- 请看这张图片
我会变成这样的- 请看这张图片
回答 1
Stack Overflow用户
发布于 2022-10-16 12:09:07
我也经历过同样的挑战。我修正了基于这个建议的代码:在网格布局中，内容必须放置在列(.col和.col-*) 中，并且只有列可能是行(.row)的直接子列。此外，行应放置在容器内(无论是固定的或流体)，以适当的填充和对齐。除此之外，Pug对缩进的要求很严格，你可能已经知道了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54341639
复制相关文章
相似问题
腾讯云开发者
