css - 包含 col-xx-x 跨度时，Bootstrap <a> list-group-item 格式会中断

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 取代了填充。

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>