我有一个无序列表，我希望它在页面上保持平衡。因此，我应用了 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>
这在柱平衡方面起作用。但由于在这块引导程序中设置了 padding-left，所以它弄乱了项目符号。
.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;对左边距的任何更改都会阻止分栏符。我已经通过在容器上设置填充成功解决了这个问题。
<div class="row" style="padding: 0.5em;">
但如果有人真正掌握了 Bootstrap 及其工作原理，我很想理解为什么设置左边距会与列平衡产生关系。
网格由 3 个部分组成：容器、行和列……
容器有 15px 的内边距。该行使用 -15px 的边距否定容器填充。列有 15 像素的填充，这会将内容拉离容器边缘并创建一致的 30 像素装订线。
添加仅被负行边距否定的 15px 填充的目的似乎很愚蠢，但允许在其他列内嵌套列是至关重要的！请注意下图中红色轮廓指示的嵌套列如何整齐地融入封闭列，而无需应用额外的填充。
让你烦恼的是列宽都被设计为百分比。因此，在您的示例中，在中等宽度视口上，列设置为 50%。当您向 li.col-md-6 添加 1em 的边距时，它会将其添加到 50% 的顶部，这意味着您最终会在行上得到 100% + 2em 并导致列换行。
合理？
I guess you have a "fix" but, another way to handle this and retain the visual bullets and the single unordered list (which could be important for accessibility), plus still have all of the nesting capabilities preserved, I would do the following in your css instead:
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 的额外填充，然后将项目符号放置在伪类中:before列内内容左侧 15 像素，内容通常会在该位置对齐。
EDIT: Here's my experience with the two different approaches.
这就是我尝试你的方法时得到的结果。请注意第二列的项目符号如何侵占第一列的文本和填充。
使用我的方法，我能够实现这一目标：
对我来说，我更喜欢这种方法，因为它的表现更好，因为项目符号被封闭在列中。此外，在我看来，这似乎不那么复杂，因为它不涉及任何额外的标记。就您而言，您添加了内联样式，出于可维护性的原因，我总是避免这样做。而且，虽然您可以在样式表中编写规则来覆盖 .row 类行为，但是当您不想在列表项上使用列类时，您将失去我上面描述的漂亮干净的嵌套。当然，您可以在行中添加另一个类或 id 以提供更多特异性，但对我来说，这又是更多标记，而且它不是标准 Bootstrap，因此其他人以后可能会更难维护（或者如果您'像我一样，你在一周内忘记了所有的 hack，这对你来说甚至可能更难维护;-)。