Bootstrap 3在列中是否有水平填充而不是垂直的原因是否有原因?

时间:2014-07-24 02:10:43

标签: css css3 twitter-bootstrap twitter-bootstrap-3 css-frameworks

我正站在一个悬崖边,做出一个重要的决定,这将影响我们关于Bootstrap的长期发展,我想确保我对他们使用 Column Padding的原因有一个很好的理解

我们运行一个多租户cms系统,它提供bootstrap作为构建站点的可用框架之一,然后我们的系统在其上添加了多层功能,因此我们做出的任何决定都会影响 all租户

使用Bootstrap Columns(即col-lg-6)或我们称之为Section的基本功能之一是,用户可以选择将内容放在 Bleed < / em>到边缘,或被填充包围。

在引导程序中,列使用padding-left:15px; padding-right:15px;表示水平,而padding-top:0; padding-bottom:0;表示垂直。

在我们的系统中,我们会一直使用padding:15px;,因为用户还可以设置列/部分背景颜色和/或图像,逻辑是您希望看到周围的颜色/图像不使用bleed的所有方面,反之亦然。

据我所知,bootstrap中的水平边距作为网格系统的函数重叠,但填充在列之间是累积的。所以我的问题是:有没有理由为什么垂直填充也明确设置?强迫这对我们的客户有什么潜在的影响?

NB 任何东西都可以通过自定义CSS编辑器覆盖,类似于Wordpress中的编辑器,虽然这种功能显然基本上是为“知情人士”保留的,而不是我期望的普通用户使用。


编辑:以下是我们创建的测试助手,用于从标题标记顶部删除边距,标题标记是我们某个部分的第一个子节点(为清晰起见,删除了细节)。

section h1:first-child, section h2:first-child, section h3:first-child,
section h4:first-child, section h5:first-child, section h6:first-child 
{ margin-top: 0 !important; }

也可以对最后一项进行此操作以删除底部边距/填充。

如果我们扩展它以涵盖下面提到的元素(即形式,p,h1-6等),因此正常间距仍然存在,这会使事情进一步复杂化或足以保留Bootstraps意图,同时允许我们自己的功能有用吗?

1 个答案:

答案 0 :(得分:2)

这是因为在列之间默认排水沟为30px的列中通常有形式,ul,ol,p,h1-h6和其他具有底部边距的内容,所以当它堆叠时会有垂直间距,如果你是在堆叠时,在列上添加底部或顶部填充将非常奇怪,在两个50%(col - * - 6)列内的两个段落将在第一个和第二个之间具有额外的填充。嵌套列将是奇数并且具有更多间距问题。垂直堆叠没有空间的唯一时间是你要在其中粘贴图像,但是你可以在图像中添加一个自定义类,以获得未浮动版本的底部边距。