css - Bootstrap list-group-item 格式在包含 col-xx-x 跨度时中断

Question

This example说明了我遇到的问题。示例 1 和 2 是完美的。没有问题。在示例 3 中，格式崩溃了，我不确定为什么。如何使示例 3 看起来像其他示例，但允许我将列表组元素网格化。

Answer 1

一个解决方案是将 clearfix 类添加到 list-group-item 元素，因为它们的子元素是 float 的。不过，我会推荐下面的替代解决方案。由于列的填充没有移位，因此该解决方案不会产生预期的结果。

Updated Example

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

或者，您也可以只用 .row 类包装列元素，该类具有内置的 clearfix。这可能是更好的解决方案，因为行用 margin-right: -15px/margin-left: -15px 替换了 padding。

In HTML5 it's fine在 anchor 元素中包含 div 元素。

Updated Example

<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>