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

这基本上是一个包含引导3答案的问题。我现在在Bootstrap4中尝试了这个解决方案，它基本上是有效的，但是有些东西看起来不干净

我制作了一个JSFIDLE来演示以下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>

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

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

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

• 添加border类以尝试并强制使用矩形边框（无效）
• 使用

  list group flush

  完全删除曲线边框（导致第一个项目缺少顶部的条，最后一个项目缺少底部的条，导致另一个不干净的外观）
• 使用

  list group flush

  和

  first

  和

  last

  类手动添加缺少的边框（无效；fiddle）

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

---

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

Bootstrap 4似乎不适合以这种方式修改样式化的

。列表组

，而无需编写自己的自定义css。您可以通过将

.list group item

更改为

.list item

开始无边框/填充，然后根据需要添加边框类和填充类

示例

---

所以你是想保留边框，但要删除圆角，还是要删除所有边框？只要我有一个看起来“相同”的列表，并且列表的所有边和端（以及列）都干净，我就很高兴。理想情况下，我会保持边界（第一个链接的小提琴与第一个和最后一个项目平滑），但如果它看起来相似，我也不会抱怨。注意：我一开始也没有通过链接。我几分钟前编辑的。那帮了大忙！使用

m-2 border

我认为我应该非常接近列表组样式。也许你可以把它包括在内，我很乐意接受你的回答！是的，我用p-2写了m-2。我应该多睡一会儿。再次感谢您的快速帮助和时间！不用担心——值得一提的是，你可以使用两者中的任何一种或两者的组合。评论中的解决方案的问题是边界加倍，所以看起来厚了一倍。因此，我遵循了这个解决方案，但是做了

class=“list item list group item action col-sm-4 p-3 border right border bottom

，然后在前三个中，我也有

border top

，每隔三个添加

border left