有什么原因为什么Bootstrap 3在列而不是垂直的水平填充？ [英] Is there a reason why Bootstrap 3 has horizontal padding in columns but not vertical?

问题描述

我站在一个悬崖上，要做出一个重要的决定，这将影响我们对Bootstrap的长期发展，我想确定我对使用 Column Padding strong>。

我们运行一个多租户cms系统，提供引导作为构建网站的可用框架之一，然后我们的系统添加多层功能

其中一个基本功能是使用Bootstrap Columns（即 col-lg-6 ），或者我们称之为 Section ，用户可以选择将内容

在引导程序中，列使用 padding-left：15px; padding-right：15px; 用于水平，但 padding-top：0;

在我们的系统中，我们使用 padding：15px; 一路，因为用户还可以设置一个列/部分的背景颜色和/或图像，逻辑是，如果你不想使用<$ c $

我理解，引导中的水平边距作为网格系统的函数重叠，但填充是累积的之间。所以我的问题是：是否有明确设置垂直填充不是的原因吗？

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等），所以正常的间距仍然存在，这会使事情进一步复杂化，

解决方案

这是因为在这些列中使用默认值在列之间有30px的间距，通常有形式，ul，ol，p，h1-h6和其他具有底部边距的内容，所以当它堆叠有垂直间距时，如果要在列上添加底部或顶部填充，奇怪的看，当堆叠时，两个段落内两个50％（col - * - 6）列将有第一和第二之间的附加填充。嵌套列将是奇怪的，并有更多的间距问题。只有当垂直堆叠没有空间时，才会在其中粘贴图像，但是您可以向图像添加自定义类，以获得未浮动版本的底部边距。

I'm standing at a precipice about to make an important decision that will affect our long term development regarding Bootstrap and I want to be sure I have a good understanding of the reasoning behind their use of Column Padding.

We run a multi-tenant cms system that offers bootstrap as one of the available frameworks from which to build a site, and then our system adds layers of functionality on top of it, so any decision we make affects all tenants.

One of the basic features is when working with a Bootstrap Columns (i.e. col-lg-6), or what we would call a Section, a user can choose to have the content inside Bleed to the edge, or be surrounded by padding.

In bootstrap, columns use padding-left:15px; padding-right:15px; for the horizontal, but padding-top:0; padding-bottom:0; for the vertical.

In our system, we would use padding:15px; all the way around, because users can also set a column/section background colour and/or image, and the logic is that you would want to see colour/image around all sides when not using bleed and vice versa.

I understand that the horizontal margins in bootstrap overlap as a function of the grid system, but padding is cumulative between columns. So my question is: is there a reason why vertical padding is not also set explicitly? What are the potential repercussions of forcing this on our clients?

N.B. Anything can be overridden via a Custom CSS editor, similar to the one in Wordpress, although this capability would obviously be essentially reserved for those "in the know" and not something I would expect a regular user to utilize.

---

EDIT: The following is a test helper we've created to remove margins from the top of header tags which are the first child of one of our sections (specifics removed for clarity).

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; }

This can also be done for last items as well to remove bottom margins/padding.

If we expand this to cover elements noted below (i.e. forms, p, h1-6, etc.) so the normal spacing persists, would this complicate things further or be adequate to preserve Bootstraps intent while allowing our own features to work?

解决方案

It's because inside those columns with the default gutter of 30px between columns there's generally forms, ul, ol, p, h1-h6, and other content that have bottom margins, so when it stacks there's vertical spacing, if you were to add bottom or top padding on the column would be quite odd looking when stacked, two paragraphs inside two 50% (col-*-6) columns would have additional padding between the first and second. And nesting columns would be odd and have even more spacing issues. The only time when the vertical stacking wouldn't have space is if you were to stick images in them, but then you can add a custom class to the image to get some bottom margin on the un-floated version.

这篇关于有什么原因为什么Bootstrap 3在列而不是垂直的水平填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！