Bootstrap平衡子弹柱

Question

我有一个无序列表,我希望在页面上保持平衡.所以我应用了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>

这在列平衡方面起作用.但是由于在这块引导程序中设置了填充左边,它搞砸了小号.

.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有一个非常牢固的控制以及它是如何工作的,我很想知道为什么设置左边距与柱平衡有关.

Answer 1

网格有3个部分:一个容器,一个行和一个列......

容器有15px的填充物.该行以-15px的边距否定容器填充.色谱柱具有15px的填充物,可将内容物从容器边缘拉出,并形成一致的30px排水沟.

添加15px填充的目的只是否定负行边距似乎很愚蠢,但是允许在其他列内嵌套列是必不可少的!请注意下图中红色轮廓指示的嵌套列如何整齐地嵌入封闭列中,而不会应用额外的填充.

搞砸了你的是,列宽都设计为百分比.因此,在您的示例中,在中宽视口上,列设置为50%.当你向li.col-md-6添加1em的边距时,它会在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的额外填充,然后将子弹与伪类:before15px放在列内部通常无论如何都要对齐的列内容的左侧.

编辑:这是我对两种不同方法的经验.

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

使用我的方法,我能够实现这一目标:

对我来说,我倾向于这种方法,因为它的表现更好,因为子弹被封闭在列内.另外,在我看来,这似乎不那么复杂,因为它不涉及任何额外的标记.在您的情况下,您已添加内联样式,出于可维护性原因,我始终避免使用该样式.而且,虽然您可以在样式表中编写规则来覆盖.row类行为,但是当您不想在列表项上使用列类时,您将失去我上面描述的那种干净的嵌套.当然,你可以在你的行中添加另一个类或id以提供更多的特性,但同样,对我而言,这是更多的标记,并且它不是标准的Bootstrap,因此以后其他人可能更难维护(或者如果你'和我一样,你在一周内忘记了所有的黑客攻击,你甚至可能更难维持;-).