如何在两列中显示无序列表？自举4

Question

引导3在单个ul中的多列未正确浮动基本上是一个包含了引导3的答案的问题。我现在尝试了引导4中的解决方案，它主要是有效的，但是有些东西看起来不干净。

我用以下html代码演示了这个问题这里：

<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类手动添加缺失的边框(无效果；篡改这里)

我最近从引导开始，我不太熟悉CSS，所以我想知道我可能缺少什么(也可以是一些非常明显的东西)。

(不确定这是否重要，但上面的图片是在FF58 Windows 10中拍摄的和获得的经验)

Answer 1

引导4似乎不适合在不编写自定义.list-group的情况下以这种方式修改样式的css。您可以通过将.list-group-item更改为.list-item，然后根据需要添加边框类和填充类，从而开始不带边框/填充。

示例 https://jsfiddle.net/jqyq46v4/