Bootstrap 3 - 小屏幕上的列顶部边距答案

【问题标题】：Bootstrap 3 - Column top margin on smaller screensBootstrap 3 - 小屏幕上的列顶部边距
【发布时间】：2014-05-09 16:40:52
【问题描述】：

我有一行有 X 个可能的列。

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <!-- ... and so on ... -->
    </div>
</div>

现在我想将margin-top:20px 添加到所有小屏幕列，并为大屏幕列添加相同的边距，如果超过 4 个，因为这会导致显示两个“行”，因此需要一些空间.

仅使用 CSS 是否有可能？

【问题讨论】：

首先，一行中不能有任意数量的列，如您所愿。一行中所有列类的总和必须为 12。 getbootstrap.com/css/#grid-example-basic
不是真的@MiljanPuzović，一旦空间用完，列就会开始换行。否则一排满是col-xs-12 怎么办？
这正是 bootstrap 的创建者的意图。
链接错误：getbootstrap.com/css/#grid-example-mixed.
不，对于您之前的问题，我发布了错误的链接。检查标记并计算数字。如果您正在编写完全响应式的代码，即。充分利用 bootrap 的 css 中的所有断点，所有大尺寸以下的列数加起来会超过十二个。在这种情况下，列将简单地开始一个新行。按照设计。

标签： css twitter-bootstrap twitter-bootstrap-3 media-queries

【解决方案1】：

这个简单的解决方案会自动为除第一列之外的所有列应用上边距，在超小屏幕尺寸下。不需要特殊的类名或对 HTML 或 CSS 进行其他修改。（将下面的 margin-top 值更改为您喜欢的任何值。）

@media (max-width: 767px) {
  [class*="col-"]:not(:first-child) {
    margin-top: 30px;
  }
}

【讨论】：

【解决方案2】：

我使用这个简单而干净的解决方案：

.row { margin-top: -15px; }
.row > div { margin-top: 15px; }

这样，每个<div class='col-*-*'> 顶部都有 15px 的边距，第一行除外（或者，在移动设备上，顶部的除外）。

【讨论】：

【解决方案3】：

这是一个旧帖子，但下面是一个干净的解决方案。

[class*="col-"] {
  margin-bottom: 15px;
}

这在某些情况下效果很好，但在不需要时会增加额外的、不必要的边距。为了解决这个问题，我们可以创建一个新的 css 类，当它们堆叠时将顶部边距应用于列。我创建了一个名为.row-grid 的类

.row.row-grid [class*="col-"] + [class*="col-"] {
  margin-top: 15px;
}

@media (min-width: 1200px) {
  .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
    margin-top: 0;
  }
}

【讨论】：

【解决方案4】：

我需要类似的东西，以下是我想出的解决方案。为未来的读者（和我自己）记录它

$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);

@for $r from 1 through 10{
  @each $res-abbr, $res-vals in $res-list{
    @media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2)) {
      @each $dir-abbr, $dir-name in $dir-list{
        $x: $r * 5;
        .m#{$dir-abbr}-#{$res-abbr}-#{$x}{
          margin-#{$dir-name}: #{$x}px;
        }
        .m#{$dir-abbr}-#{$res-abbr}-#{$r}p{
          margin-#{$dir-name}: #{$r}unquote('%');
        }
      }
    }
  }
}

此 SASS 代码按照以下方式生成类

@media (min-width: 0px) and (max-width: 767px) {
    .mt-xs-5 { margin-top: 5px; }
    .mt-xs-1p { margin-top: 1%; }
    .mr-xs-5 { margin-right: 5px; }
    .mr-xs-1p { margin-right: 1%; }
    .mb-xs-5 { margin-bottom: 5px; }
    .mb-xs-1p { margin-bottom: 1%; }
    .ml-xs-5 { margin-left: 5px; }
    .ml-xs-1p { margin-left: 1%; } 
}

因此内容编辑器可以使用.mt-xs-10 将margin-top: 10px 应用于extra-small 屏幕上的给定元素。

我希望它对某人有所帮助。

【讨论】：

应该祝贺您将一项简单的任务过度复杂化。
我不认为它过于复杂，而是赋予内容编辑者权力。想想生成的 CSS 规则的使用。
有趣的资源，对于小型项目，它过于复杂，但对于较大的项目（重复的简单任务），它更聪明，更简单。

【解决方案5】：

您可以随时使用媒体查询来获取上边距。

@media (max-width: 767px) {
    .col-xs-6 {
        margin-top:20px;
    }
}

http://www.bootply.com/126007

附： - .col-* 在.row 中的总数超过 12（即：http://getbootstrap.com/css/#grid-example-mixed）并没有错。它只会导致换行。文档中有几个使用此技术的示例。它通常不适合嵌套行。

【讨论】：

媒体查询不应该是“max-width: 767px”吗，因为 Bootstrap 3 的 .col-sm 适用于“≥768px”？
我可能是唯一一个认为应该有更好的解决方案（保证金等级stackoverflow.com/a/20096216/2219831）的人。为了在项目之间添加垂直空间，内容编辑器必须编辑 CSS。也可能存在并非所有堆叠元素都需要垂直间距的情况。
是的，margin 类也可以工作，并且在即将到来的 Bootstrap 4 中有类似的东西。但是，margin 类不适用于像这个解决方案这样的特定网格层/断点。通常内容包含在另一个元素（即：
）中，该元素也将提供间距。