问题
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?
回答1:
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.
来源：https://stackoverflow.com/questions/24924024/is-there-a-reason-why-bootstrap-3-has-horizontal-padding-in-columns-but-not-vert