Bootstrap 4 水平列表组刷新答案

【问题标题】：Bootstrap 4 horizontal list group flushBootstrap 4 水平列表组刷新
【发布时间】：2020-02-04 10:32:48
【问题描述】：

如果将“list-group-flush”类添加到水平列表组，则最后一个子项（li）没有边框底部。它不应该被视为 Bootstrap 4 的错误吗？此外，还存在一些预期之外的边界半径。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
</head>
<body>

<div class="container">
  <h2>Horizontal List Groups</h2>
 
  <ul class="list-group list-group-horizontal list-group-flush">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
  </ul>
</div>

</body>
</html>

【问题讨论】：

你为什么使用“list-group-flush”类？
完全移除外边框。
那么这不是正确的方法，一种方法是需要定义自己的css样式来覆盖引导程序
我在下面更新了我的答案。

标签： bootstrap-4

【解决方案1】：

这不是引导错误，因为 list-group-flush

list-group-flush 删除一些边框和圆角以在父容器中边对边呈现列表组项目

您可以通过将样式应用于列表项的最后一个子项来为最后一个添加边框

【讨论】：

【解决方案2】：

这是您删除“list-group-flush”后得到的结果

如果您想一起删除边框（根据您的评论）

<ul class="list-group list-group-horizontal">
    <li class="list-group-item" style="border: none;">First item</li>
    <li class="list-group-item" style="border: none;">Second item</li>
    <li class="list-group-item" style="border: none;">Third item</li>
    <li class="list-group-item" style="border: none;">Fourth item</li>
  </ul>

在这种情况下，您会得到：

【讨论】：