Question

我创建了一个基本的网格系统来替换自定义项目中的bootstrap（试图减少依赖项）

您可以在此处或下方查看代码：http://codepen.io/anon/pen/ORVZyQ?editors=1100#0

我遇到的问题是最右边的元素有余量。

我的代码中的HTML允许在小屏幕上显示2x2，在较大的屏幕上显示4x1，但是，在较小的屏幕上，第二个框由于具有边距而循环到左侧。

如果是最后一列，我如何删除保证金。

谢谢！

HTML：

<div class="padding">
  <div class="row">
    <div class="col-xs-6 col-md-3" style="background:#ff9900; height:20px;"></div>
    <div class="col-xs-6 col-md-3" style="background:#a82626; height:20px;"></div>
    <div class="col-xs-6 col-md-3" style="background:#ff9900; height:20px;"></div>
    <div class="col-xs-6 col-md-3" style="background:#a82626; height:20px;"></div>
  </div>
</div>

SCSS：

// Margin
$grid-spacing:3%;
$row-gap: 10px;

//Breakpoints
$xsmall: 480px;
$small:767px;
$medium:1024px;
$large:1600px;
$xlarge:1920px;

%clearfix:after {
    display:block;
    clear:both;
    content:'';
}
.fullwidth {
    margin-right: auto;
    margin-left: auto;
    @extend %clearfix;
}
.padded {
    margin-right: auto;
    margin-left: auto;
    @extend %clearfix;
    @media screen and (max-width:$xsmall) {
        width: 100%
    }
    @media screen and (min-width:$xsmall + 1) and (max-width:$small) {
        width: $xsmall
    }
    @media screen and (min-width:$small + 1) and (max-width:$medium) {
        width: $small
    }
    @media screen and (min-width:$medium + 1) and (max-width:$large) {
        width: $medium
    }
    @media screen and (min-width:$large + 1) and (max-width:$xlarge) {
        width: $large
    }
    @media screen and (min-width:$xlarge + 1) {
        width: $xlarge
    }
}
.row {
    @extend %clearfix;

    & + & {
        margin-top: $row-gap;
    }
}
[class^="col-"] {
    float:left;
    margin-right:$grid-spacing;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width: 100%;
    &:last-child {
        margin-right:0%;
    }
}

.col-xs-1 { width: (100% - ($grid-spacing *11)) /12; }

.col-xs-2 { width: (100% / (12/2) ) - ($grid-spacing *10 /12); }

.col-xs-3 { width: (100% / (12/3) ) - ($grid-spacing *9 /12); }

.col-xs-4 { width: (100% / (12/4) ) - ($grid-spacing *8 /12); }

.col-xs-5 { width: (100% / (12/5) ) - ($grid-spacing *7 /12); }

.col-xs-6 { width: (100% / (12/6) ) - ($grid-spacing *6 /12); }

.col-xs-7 { width: (100% / (12/7) ) - ($grid-spacing *5 /12); }

.col-xs-8 { width: (100% / (12/8) ) - ($grid-spacing *4 /12); }

.col-xs-9 { width: (100% / (12/9) ) - ($grid-spacing *3 /12); }

.col-xs-10 { width: (100% / (12/10) ) - ($grid-spacing *2 /12); }

.col-xs-11 { width: (100% / (12/11) ) - ($grid-spacing *1 /12); }

.col-xs-12 { width: 100%; }

@media screen and (min-width:$xsmall + 1) {
    .col-sm-1 { width: (100% - ($grid-spacing *11)) /12; }

    .col-sm-2 { width: (100% / (12/2) ) - ($grid-spacing *10 /12); }

    .col-sm-3 { width: (100% / (12/3) ) - ($grid-spacing *9 /12); }

    .col-sm-4 { width: (100% / (12/4) ) - ($grid-spacing *8 /12); }

    .col-sm-5 { width: (100% / (12/5) ) - ($grid-spacing *7 /12); }

    .col-sm-6 { width: (100% / (12/6) ) - ($grid-spacing *6 /12); }

    .col-sm-7 { width: (100% / (12/7) ) - ($grid-spacing *5 /12); }

    .col-sm-8 { width: (100% / (12/8) ) - ($grid-spacing *4 /12); }

    .col-sm-9 { width: (100% / (12/9) ) - ($grid-spacing *3 /12); }

    .col-sm-10 { width: (100% / (12/10) ) - ($grid-spacing *2 /12); }

    .col-sm-11 { width: (100% / (12/11) ) - ($grid-spacing *1 /12); }

    .col-sm-12 { width: 100%; }
}
@media screen and (min-width:$small + 1) {
    .col-md-1 { width: (100% - ($grid-spacing *11)) /12; }

    .col-md-2 { width: (100% / (12/2) ) - ($grid-spacing *10 /12); }

    .col-md-3 { width: (100% / (12/3) ) - ($grid-spacing *9 /12); }

    .col-md-4 { width: (100% / (12/4) ) - ($grid-spacing *8 /12); }

    .col-md-5 { width: (100% / (12/5) ) - ($grid-spacing *7 /12); }

    .col-md-6 { width: (100% / (12/6) ) - ($grid-spacing *6 /12); }

    .col-md-7 { width: (100% / (12/7) ) - ($grid-spacing *5 /12); }

    .col-md-8 { width: (100% / (12/8) ) - ($grid-spacing *4 /12); }

    .col-md-9 { width: (100% / (12/9) ) - ($grid-spacing *3 /12); }

    .col-md-10 { width: (100% / (12/10) ) - ($grid-spacing *2 /12); }

    .col-md-11 { width: (100% / (12/11) ) - ($grid-spacing *1 /12); }

    .col-md-12 { width: 100%; }
}
@media screen and (min-width:$medium + 1) {
    .col-lg-1 { width: (100% - ($grid-spacing *11)) /12; }

    .col-lg-2 { width: (100% / (12/2) ) - ($grid-spacing *10 /12); }

    .col-lg-3 { width: (100% / (12/3) ) - ($grid-spacing *9 /12); }

    .col-lg-4 { width: (100% / (12/4) ) - ($grid-spacing *8 /12); }

    .col-lg-5 { width: (100% / (12/5) ) - ($grid-spacing *7 /12); }

    .col-lg-6 { width: (100% / (12/6) ) - ($grid-spacing *6 /12); }

    .col-lg-7 { width: (100% / (12/7) ) - ($grid-spacing *5 /12); }

    .col-lg-8 { width: (100% / (12/8) ) - ($grid-spacing *4 /12); }

    .col-lg-9 { width: (100% / (12/9) ) - ($grid-spacing *3 /12); }

    .col-lg-10 { width: (100% / (12/10) ) - ($grid-spacing *2 /12); }

    .col-lg-11 { width: (100% / (12/11) ) - ($grid-spacing *1 /12); }

    .col-lg-12 { width: 100%; }
}
@media screen and (min-width:$large + 1) {
    .col-xl-1 { width: (100% - ($grid-spacing *11)) /12; }

    .col-xl-2 { width: (100% / (12/2) ) - ($grid-spacing *10 /12); }

    .col-xl-3 { width: (100% / (12/3) ) - ($grid-spacing *9 /12); }

    .col-xl-4 { width: (100% / (12/4) ) - ($grid-spacing *8 /12); }

    .col-xl-5 { width: (100% / (12/5) ) - ($grid-spacing *7 /12); }

    .col-xl-6 { width: (100% / (12/6) ) - ($grid-spacing *6 /12); }

    .col-xl-7 { width: (100% / (12/7) ) - ($grid-spacing *5 /12); }

    .col-xl-8 { width: (100% / (12/8) ) - ($grid-spacing *4 /12); }

    .col-xl-9 { width: (100% / (12/9) ) - ($grid-spacing *3 /12); }

    .col-xl-10 { width: (100% / (12/10) ) - ($grid-spacing *2 /12); }

    .col-xl-11 { width: (100% / (12/11) ) - ($grid-spacing *1 /12); }

    .col-xl-12 { width: 100%; }
}

编辑1：我尝试用填充替换边距，但这意味着它没有到达容器的边缘：http://codepen.io/anon/pen/kkrroN?editors=1100#0

Answer 1

如果我理解你，那么你需要使用伪选择器：nth-last-of-type而不是last-child

 [class^="col-"] {
    float:left;
    margin-right:$grid-spacing;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width: 100%;
    &:nth-last-of-type(1) {
        margin-right: 0;
    }
}

Answer 2

如果您确定较小的屏幕为2x2，您可以轻松使用（偶数）规则和<select [(ngModel)]="myForm.firstMenu"

Check on CodePen ( colors only for testing purposes )

constructor() {
  this.myForm.firstMenu = items[0];
}

所以现在

&:last-child

每个偶数块都有边距右：0但在更大的屏幕上只有最后一个;）

提示：不要将单位用于零值，这是一种不好的做法

Answer 3

我想通了，我根据＆＃34; EDIT1＆＃34;换出了填充边距，但是空间的原因是我没有更新网格宽度方程式。

您需要删除网格间距部分。 e.g：

.col-md-3 { width: (100% / (12/3) ) - ($grid-spacing *9 /12); }

对

的更改

.col-md-3 { width: (100% / (12/3) ); }

最后一个子问题上的SCSS自定义响应网格边距

3 个答案: