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

Question

这个例子说明了我遇到的问题.例1和2是完美的.没有问题.在示例3中,格式分崩离析,我不确定原因.我如何使示例3看起来像其他示例,但允许我将list-group-item网格化.

Answer 1

一种解决方案是将clearfix类添加到list-group-item元素中,因为它们的子元素是浮动的.不过,我会推荐下面的替代解决方案.由于柱的衬垫没有移位,因此该解决方案不能产生期望的结果.

更新的示例

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

在HTML5中,div在一个锚元素中有一个元素是很好的.

更新的示例

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