Css 引导<；a>；包含col-xx-x跨距时列表组项目格式中断

说明了我遇到的问题。示例1和2非常完美。没有问题。在示例3中，格式出现了问题，我不确定原因。如何使示例3看起来像其他示例，但允许我将列表组项网格化。

一个解决方案是将

clearfix

类添加到

列表组项

元素中，因为它们的子元素是浮动的。不过，我会推荐下面的替代解决方案。由于列的填充未被替换，此解决方案不会产生所需的结果

---

您的问题依赖于非常糟糕的编码实践，因此您只有靠运气才能获得好结果，但您无法重现它，因为。。。。从一开始就很糟糕

只需更改示例3中的HTML，如下所示：

<!-- Example 3 -->
<ul class="list-group">
  <li class="row list-group-item"><span class="col-md-6">One Item</span><span class="col-md-6">OneB Item</span></li>
  <li class="row list-group-item"><span class="col-md-6">Two Item</span><span class="col-md-6">TwoB Item</span></li>
</ul>

一个ItemOneB项目
两项两项

现在您将看到我如何使用引导所需的ROW类。。。。排。但最重要的是，我在

ul

元素中使用了

li

元素，这是解决问题的99%解决方案。基本上，只要按预期使用HTML，它在大多数情况下都能工作。另外，习惯于测试，一眼就能得到快速答案，而不必在这里等待答案

---

编辑：不用说，您必须更改运气好的其他示例

这是有效的HTML吗<代码>嵌套在

ul

中的a？@justinskilles很好。不，这是无效的。我更新了它

ol

/

ul

元素只能包含

li

元素。当我回答这个问题时，我本应该明白这一点，但我只是基于OPs HTML。

<div class="list-group">
  <a href="" class="list-group-item">
    <div class="row">
      <span class="col-md-6">One Item</span>
      <span class="col-md-6">OneB Item</span>
    </div>
  </a>
  <a href="" class="list-group-item">
    <div class="row">
      <span class="col-md-6">Two Item</span>
      <span class="col-md-6">TwoB Item</span>
    </div>
  </a>
</div>

<!-- Example 3 -->
<ul class="list-group">
  <li class="row list-group-item"><span class="col-md-6">One Item</span><span class="col-md-6">OneB Item</span></li>
  <li class="row list-group-item"><span class="col-md-6">Two Item</span><span class="col-md-6">TwoB Item</span></li>
</ul>