Question

我有一行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则会导致两个＆＃34;行＆＃34;要显示，因此需要一些空间。

只有使用CSS才能以某种方式实现吗？

Answer 1

您可以随时使用媒体查询。

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

http://www.bootply.com/126007

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

Answer 2

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

$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屏幕上的给定元素。

我希望它有所帮助。

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

Answer 4

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

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

通过这种方式，每个<div class='col-*-*'>的顶部都有15px的空白，第一行除外（或者在移动设备上，顶部除外）。

Answer 5

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

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

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

5 个答案: