如何在两列中显示无序列表？引导4

Question

Bootstrap 3 Multi-column within a single ul not floating properly基本上是一个问题，答案涵盖bootstrap 3.我现在尝试使用bootstrap 4中的解决方案，而主要是，但有些东西看起来不干净。

我使用以下html代码制作了一个jsfiddle以演示问题here：

<div class="col-12 container" style="height: 350px;">
  <ul class="list-unstyled row">
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
    <li class="list-group-item col-4">Test</li>
  </ul>
</div>

如您所见，第一个和最后一个项目仍有圆形边框：

我试图绕过这个：

• 添加边框类以尝试强制使用矩形边框（无效）
• 使用list-group-flush完全删除弯曲的边框（导致第一个项目缺少顶部的栏，而最后一个缺少底部的栏，导致另一个不干净的外观）
• 使用list-group-flush与first和last类手动添加缺失的边框（无效;小提琴here）

我最近开始使用bootstrap，我对CSS并不是很熟悉，所以我想知道我可能会缺少什么（也可以是非常明显的东西）。

（不确定是否重要，但上面的图片是在FF58 Windows 10中获得的，并获得了经验）

Answer 1

Bootstrap 4似乎无法在不编写自定义CSS的情况下修改样式.list-group。您可以通过将.list-group-item更改为.list-item，然后根据需要添加边框类和填充类来启动无边框/填充

的例如 https://jsfiddle.net/jqyq46v4/