在Bootstrap列之间添加边距，同时为12列宽列删除它 [英] Add margin between Bootstrap columns while removing it for 12-col-wide columns

问题描述

我使用自定义版本的Bootstrap v3在列（gutter）之间添加百分比分页边距。

I am using a customized version of Bootstrap v3 that adds percentage-paged margin-left between columns (gutter).

为了在所有地方都有边距，列，我应用一个规则，它找到一行的第一个孩子并重置其边距。这用于在Boostrap v2上工作，但现在应用在元素上的多个宽度类不起作用。

In order to have margin everywhere but the first column, I apply a rule which finds the first child of a row and resets its margin. This used to work back on Boostrap v2, but now with the multiple width classes applied on elements it doesn't work as well.

原因是，当col- * -12被触发，不是行的第一个子元素的元素不与左侧的其余div对齐。 （因为它继承了margin-left值）

The reason is, when a col-*-12 is triggered, the element which was not a first child of a row, does not align with the rest of the divs in the left. (because it inherits the margin-left value)

为了说明这个问题，我做了一个plunker。 http://embed.plnkr.co/t31Sc2cPvaIsSYVv7OIT/

In order to illustrate the problem, I made a plunker. http://embed.plnkr.co/t31Sc2cPvaIsSYVv7OIT/

你必须知道这是在CMS的上下文中实现的20种不同的布局，所以当然解决方案应该是通用的。

You have to know that this is implemented in the context of a CMS with 20 different layouts so of course the solution should be generic.

推荐答案

问题的解决方案比我想象的要简单。

The solution to the problem was simpler than I thought.

1. 我在媒体查询中移动了左边距离声明：

1. I moved the margin-left declarations inside the media queries:

@media (min-width:579px) {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11 {
    float: left;
    margin-left: 3.1518624641834%;
    *margin-left: 2.0744680851064%;
  }
....
}

我在每个媒体查询中再次重置-12（100％宽）列的左侧边距。

I reset the margin-left of -12 (100% wide) columns only, again inside each media query.

  .col-sm-12 {
    width: 100%;
    *width: 99.946808510638%;
    margin-left: 0;
  }

the important thing to recall is you shouldn't have any margin-left declarations outside media queries.

这篇关于在Bootstrap列之间添加边距，同时为12列宽列删除它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！