Twitter bootstrap 3 引导平衡项目符号列

我有一个无序的列表，我想平衡整个页面。因此，我应用了引导列平衡技术，如本示例所示。当然，真正的项目有较长的文本

<div class="row">
  <ul>
    <li class="col-xs-12 col-md-6">item 1</li>
    <li class="col-xs-12 col-md-6">item 2</li>
    <li class="col-xs-12 col-md-6">item 3</li>
    <li class="col-xs-12 col-md-6">item 4</li>
    <li class="col-xs-12 col-md-6">item 5</li>
  </ul>
</div>

我试着用我自己的CSS解决这个问题：

li.col-xs-1, ... li.col-lg-12 {
  margin-left:1em;
  padding-left:0em;
}

但这挫败了这个国家

实验表明，罪魁祸首是

左边距：1em对左边距的任何更改都会导致列中断。我成功地解决了这个问题，在容器上设置了填充

<div class="row" style="padding: 0.5em;">



但是，如果有人对引导和它的工作原理有一个真正坚定的把握，我很想理解为什么设置左边距会对列平衡产生很大影响。
网格由三部分组成：一个容器、一行和一列

这个容器有15像素的填充物。该行使用-15px的边距否定容器填充。列具有15px的填充，这会将内容从容器的边缘拉离，并创建一个一致的30px边沟

添加仅由负行边距抵消的15px填充的目的似乎很愚蠢，但必须允许在其他列中嵌套列！请注意，在下图中，红色轮廓表示的嵌套列如何整齐地放入封闭列中，而无需应用额外的填充

搞砸你的是列宽都是按百分比设计的。因此，在您的示例中，在“中等宽度”视口中，列设置为50%。当您在li.col-md-6中添加1米边距时，它会在50%的基础上添加1米边距，这意味着您在行中添加了100%+2米边距，并导致列换行

有道理吗


我想您有一个“修复”，但是，另一种处理方法是保留可视项目符号和单个无序列表（这对可访问性很重要），再加上仍然保留所有嵌套功能，我将在您的css中执行以下操作：

li.col-lg-12, li.col-md-6 {  
    list-style: none;
    padding-left: 30px;
}
li.col-lg-12:before, li.col-md-6:before {  
    content: "\2022";
    position: absolute;
    left: 15px;
}

这样，您就不需要在设计中添加任何附加标记。基本上，这样做是删除列表样式，向列表项添加30px的额外填充，然后将带有伪类的项目符号放置在列中内容的左侧，该列通常会对齐内容

编辑：以下是我使用这两种不同方法的经验。

这就是我尝试你的方法时得到的。请注意，第二列中的项目符号是如何侵占第一列中的文本和填充的

使用我的方法，我能够做到这一点：


对我来说，我更喜欢这种方法，因为它的表现更好，因为项目符号被封闭在列中。此外，在我看来，这似乎不那么复杂，因为它不涉及任何额外的标记。在您的例子中，您添加了内联样式，出于可维护性原因，我一直避免使用内联样式。而且，虽然您可以在样式表中编写一个规则来覆盖.row类行为，但是如果您不想在列表项上使用列类，那么您将失去我上面描述的良好的干净嵌套。当然，您可以向行中添加另一个类或id以提供更多的特殊性，但对我来说，这是更多的标记，并且它不是标准的引导，因此以后其他人可能更难维护它（或者如果您像我一样，一周内忘记了所有的hacks，那么您可能更难维护；-）.
这是对我的“为什么”问题的一个很好的回答。但是为什么您更喜欢这个更复杂的解决方案而不是简单的容器填充？有什么更好的呢？我分享了一些截图，所以我编辑了答案以回应评论中你的问题。
li.col-lg-12, li.col-md-6 {  
    list-style: none;
    padding-left: 30px;
}
li.col-lg-12:before, li.col-md-6:before {  
    content: "\2022";
    position: absolute;
    left: 15px;
}