在 Bootstrap 列之间添加边距，同时为 12 列宽的列删除边距答案

【问题标题】：Add margin between Bootstrap columns while removing it for 12-col-wide columns在 Bootstrap 列之间添加边距，同时为 12 列宽的列删除边距
【发布时间】：2014-11-18 22:00:27
【问题描述】：

我正在使用 Bootstrap v3 的自定义版本，它在列之间添加百分比分页边距（装订线）。

为了在除第一列之外的所有地方都有边距，我应用了一个规则来查找行的第一个子元素并重置其边距。这曾经在 Boostrap v2 上起作用，但现在在元素上应用了多个宽度类后，它就不能正常工作了。

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

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

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

【问题讨论】：

你想做什么？您是否想知道如何更改装订线宽度，但页面在 v.3 中仍具有响应性？或者，您是否致力于您的方法并且您想看看是否有针对此特定问题的解决方案？
我想找到一种聪明的方法，将占容器总宽度 100% 的元素的 margin-left 重置为 0。当然是响应式的（这就是这样做的重点）跨度>
你可能会遇到很多麻烦来做一些 Bootstrap 已经做过的事情......将你的 cols 放在 .row 中消除了在大多数情况下强制负边距的需要，因为 .row 抵消了用 -15px 边距填充。这样，左右列中的内容就在边缘，但内部列的填充完好无损。你显然有很多事情要做，但有可能实现这将节省你的时间和恶化......
是的，但是当你的 div 进入响应模式时，它们会相互向下移动，所以行的行为不会像它们那样......如果你认为你有解决方案，你能做一个 plunker fork，我'会接受你的回答

标签： html css twitter-bootstrap-3

【解决方案1】：

您需要使用最大宽度而不是通常的最小宽度设置自定义媒体查询，并给它一个margin-left:0px;，如下所示：

@media (max-width: 1169px){
  .row .col-md-12{
    margin-left: 0px;
  }
}

HTML：

<div class="row">
  <div class="col-md-12">...</div>
</div>

【讨论】：

应用此规则会将包含 col-md-12 类的 div 的所有边距设置为 0.. 所以我不会再有任何排水沟了...
所以在其中添加另一个类...即“.row .col-md-12 .custom {...”并将该类添加到您需要使用的 HTML 中的单个位置它。
你没明白。这不是一次性的例外，这是一种常见的情况，任何布局中的任何嵌套元素都可能发生这种情况......
如果您使用基于百分比的内边距而不是边距，并使用内置的 .row 边距偏移量来使左右内容内联怎么办？
我只是把我的答案放回原来的形式，因为我想到你最初的担忧不是问题。此规则仅在宽度低于 1170 像素时（即当其全宽时）将 col-md-12 设置为 left-margin:0。在全宽时，您显然不需要排水沟。一旦超过 1170 像素，媒体查询将禁用边距并恢复为您的原始设置。

【解决方案2】：

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

我在媒体查询中移动了 margin-left 声明：

@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% 宽）列的左边距。

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

需要记住的重要一点是，您不应该在媒体查询之外有任何 margin-left 声明。

【讨论】：