Question

This example说明了我遇到的问题。例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替换填充。

In HTML5 it's fine在锚元素中包含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>

Answer 2

你的问题依赖于非常糟糕的编码习惯，因此你只有运气才能取得好成绩，但你无法重现它，因为......从一开始它就很糟糕。

只需更改样本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>

现在，您将看到我如何使用Bootstrap ....行所需的ROW CLASS。但最重要的是，我在li元素中使用了ul元素，这就像问题解决方案的99％。基本上，只需按预期使用HTML，它大部分时间都可以使用。此外，习惯于在Validator中进行测试，您只需一瞥即可获得快速答案，而无需在此等待答案。

编辑：毋庸置疑，您必须更改运气方面的其他样本

Bootstrap <a> list-group-item format breaks when including col-xx-x spans</a>

2 个答案: