Bootstrap 平衡子弹列

Posted 2023-03-06

【中文标题】Bootstrap 平衡子弹列

【英文标题】：Bootstrap balancing bullet columns

【发布时间】：2014-07-16 23:22:34

【问题描述】：

我有一个无序列表，希望在整个页面中保持平衡。因此，我应用了 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 及其工作原理，我很想了解为什么设置左边距会与列平衡一起玩滚刀。

【参考方案1】：

网格由 3 个部分组成：容器、行和列...

容器有 15px 的内边距。该行以 -15px 的边距否定容器填充。列有 15px 的内边距，这会将内容拉离容器的边缘并创建一致的 30px 间距。

添加仅被负行边距否定的 15px 填充的目的似乎很愚蠢，但允许在其他列中嵌套列是必不可少的！请注意下图中由红色轮廓指示的嵌套列如何整齐地适合封闭列，而无需应用额外的填充。

让您感到困惑的是，列宽都设计为百分比。因此，在您的示例中，在中等宽度的视口中，列设置为 50%。当您将 1em 的边距添加到 li.col-md-6 时，它会将其添加到 50% 的顶部，这意味着您在行上以 100% + 2em 结束并导致列换行。

有意义吗？

我猜你有一个“修复”，但是，另一种处理这个问题并保留视觉项目符号和单个无序列表（这可能对可访问性很重要），加上仍然保留所有嵌套功能，我会在你的 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 的额外填充，然后将带有伪类 :before 15px 的项目符号放置在内容通常会对齐的列内的左侧.

编辑：这是我对这两种不同方法的体验。

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

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

对我来说，我更喜欢这种方法，因为它在项目符号包含在列中的意义上表现更好。此外，在我看来，这似乎不那么复杂，因为它不涉及任何额外的标记。在您的情况下，您添加了内联样式，出于可维护性的原因，我总是避免这样做。而且，虽然您可以在样式表中编写规则来覆盖 .row 类的行为，但是当您不想在列表项上使用列类时，您将失去我上面描述的那种干净的嵌套。当然，你可以在你的行中添加另一个类或 id 以提供更多的特异性，但对我来说，这又是更多的标记，而且它不是标准的 Bootstrap，因此其他人以后可能更难维护（或者如果你像我一样，你会在一周内忘记所有的技巧，你可能更难以维护;-)。

【讨论】：

这很好地回答了我的“为什么”问题。但是为什么你更喜欢这个更复杂的解决方案而不是简单的容器填充呢？它有什么更好的地方？

我分享了一些截图，所以我编辑了答案以在评论中回复您的问题。