Question

修改

我正在使用Bootstrap网格框架。使用纯CSS创建垂直col分隔符的最佳方法是什么？请参阅下面的代码：

原始问题

我正在使用Bootstrap网格框架。除了常见的.col-*-*类之外，我还使用.col-*-push-*和.col-*-pull-*类来重新排列我的cols，增加视口宽度。

我想使用此SASS代码将中间的cols划分为一个细边框：

/* Hide any overflowing columns, applied to .row */
.gutter-border {
  overflow: hidden;

  [class^="col-"],
  [class*=" col-"] {
    border-left: 1px solid $gray-lighter;
    padding-left: $grid-gutter-width / 2;

    /* Equal height hack */
    padding-bottom: 9999px;
    margin-bottom: -9999px;

        &:last-child {
        border-right: 1px solid $gray-lighter;
        padding-left: $grid-gutter-width / 2;
        }
    }
    .col-xs-#{$grid-columns} {
        @media (max-width: $screen-sm) {
        border-right: 1px solid $gray-lighter;
        }
    }
    .col-sm-#{$grid-columns} {
        @media (min-width: $screen-sm) and (max-width: $screen-md) {
        border-right: 1px solid $gray-lighter;
        }
    }
    .col-md-#{$grid-columns} {
        @media (min-width: $screen-md) and (max-width: $screen-lg) {
        border-right: 1px solid $gray-lighter;
        }
    }
    .col-lg-#{$grid-columns} {
        @media (min-width: $screen-lg) {
        border-right: 1px solid $gray-lighter;
        }
    }
}

当然使用推拉类时，:last-child选择器无法正常工作，因为使用left和right属性推送和提取列：

/* Excerpt from Bootstrap Sass port, /_mixins/_grid-framework.scss, line 33ff */
@mixin calc-grid-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .col-#{$class}-#{$index} {
      width: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) and ($index > 0) {
    .col-#{$class}-push-#{$index} {
      left: percentage(($index / $grid-columns));
    }
  }
  @if ($type == pull) and ($index > 0) {
    .col-#{$class}-pull-#{$index} {
      right: percentage(($index / $grid-columns));
    }
  }
}

那么，是否有可能使用SASS / CSS来选择节点中的最后一个子节点，但显示最后一个子节点？或者我必须开发一个jQuery解决方案，这会非常容易吗？

Bootstrap：如何创建col分隔符

0 个答案: