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

Question

Bootstrap 3 单个 ul 中的多列未正确浮动基本上是一个问题，其答案涵盖了 bootstrap 3。我现在尝试了 bootstrap 4 中的解决方案，它大部分都有效，但有些东西看起来并不干净。

我做了一个的jsfiddle证明问题在这里与下面的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-flushafirst和lastclass 手动添加缺少的边框（无效；在这里小提琴）

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

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

Answer 1

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

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