时间戳

首页 > 解决方案 > Bootstrap：2列列表（多维）->删除空格

twitter-bootstrap - Bootstrap：2列列表（多维）->删除空格

问题描述

我想用 bootstrap 创建一个 2 列的多维列表。当第一个没有子项时，如何避免 2 个列表项之间的“空白间距”。

<ul class="list-unstyled row ul-pages">
<li class="list-item col-6"><h3>Item 1</h3></li>
<li class="list-item col-6"><h3>Item 2</h3>
    <ul class="list-unstyled ul-subpages">
        <li class="list-item">Item 2.1</li>
        <li class="list-item">Item 2.2</li>
        <li class="list-item">Item 2.3</li>
        <li class="list-item">Item 2.4</li>
    </ul>
</li>
<li class="list-item col-6"><h3>Item 3</h3></li>
<li class="list-item col-6"><h3>Item 4</h3></li>

运行此代码时，您将在第一列中看到 Item 1 和 Item 3 之间的空格： https ://www.codeply.com/p/5yns5FO1aS

示例输出

有什么想法可以避免这种情况吗？

标签： twitter-bootstrap

解决方案

我已经通过使用引导程序 5 的砌体示例（需要额外的 JS）解决了我的问题。

这也适用于列表。

在这里你可以看到我的最终代码： 在此处输入链接描述

推荐阅读