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

Question

Bootstrap 3 Multi-column within a single ul not floating properly 基本上是一个答案涵盖 bootstrap 3 的问题。我现在尝试了 bootstrap 4 中的解决方案，它 大部分 有效但是有些地方看起来不太干净

我制作了一个 jsfiddle 以使用以下 html-代码演示问题 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>

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

我试图通过以下方式解决这个问题：

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

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

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

Answer 1

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

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

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

How to display an unordered list in two columns? bootstrap 4

html

css

twitter-bootstrap-4