Bootstrap平衡项目符号列
我有一个无序的列表，我希望在整个页面上保持平衡。 所以我应用了Bootstrap列平衡技术，如本例所示。 当然，真实的项目文字较长。
<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> 这在列平衡方面起作用。 但是由于在这个bootstrap块中设置了填充左侧，所以它把这个项目弄糟了。
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
我试图用我自己的一些CSS来解决这个问题：
li.col-xs-1, ... li.col-lg-12 { margin-left:1em; padding-left:0em; }
但是这个挫败列阵。
实验揭示了罪魁祸首margin-left:1em; 任何改变的左边缘阻碍列rest。 我已经成功地通过在容器上设置填充来解决这个问题。
<div class="row" style="padding: 0.5em;">
但是，如果有人对Bootstrap有真正的把握，以及它是如何工作的，我很想知道为什么设置左边距与列平衡一起玩滚刀。
网格工作与3个部分：容器，行和列（S）…
容器有15px的填充。 该行使用-15px的边距取消容器填充。 列有15px的填充，将内容拉离容器的边缘，创build一个一致的30px的排水沟。
添加15px的填充的目的只是消极的行边缘看起来很愚蠢，但它是必不可less的其他列嵌套列！ 请注意，在下图中，红色轮廓所示的嵌套列如何整齐地放入封闭列中，而无需应用额外的填充。
什么是你搞砸了列宽是所有的百分比devise。 所以，在你的例子中，在中等宽度的视口上，列被设置为50％。 当你给li.col-md-6添加1em的保证金时，在50％的顶部添加了这个数字，这意味着你在该行的100％+ 2em结束，并导致列包装。
合理？
我想你有一个“修复”，但另一种方法来处理这个问题，并保留视觉子弹和单一的无序列表（这可能是重要的可访问性），加上仍然有所有的嵌套function保留，我会做以下你的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; }
这样你就不需要为你的devise添加任何额外的标记。 基本上这样做是删除列表样式，添加30px的附加填充到列表项，然后将子项与伪类:before 15px :before的内容通常会被alignment列内的内容的左侧。
编辑：这是我的两种不同的方法的经验。 
这是我尝试你的方法时得到的。 请注意，第二列的项目符号是如何侵占第一列的文本和填充项的。
用我的方法，我能够做到这一点：
对于我来说，我会赞成这种方法，因为它的行为更好，因为子弹被封闭在列中。 另外，在我看来，这似乎不那么复杂，因为它不涉及任何额外的标记。 在你的情况下，你已经添加了内联样式，由于可维护性的原因，我总是避免这种样式。 而且，虽然可以在样式表中编写规则来覆盖.row类的行为，但是如果您不想在列表项上使用列类，则会丢失上面描述的那种干净的嵌套。 当然，你可以在你的行中添加另外一个类或者id来提供更多的特殊性，但是对于我来说，这更多的是标记，它不是标准的Bootstrap，所以以后可能更难以维护（或者，像我一样，一周之内就把你所有的黑客都忘了，可能会更难维护;-)。
