css - 试图让 Kube css 框架有更多的断点

Question

我正在为站点使用 Kube css 框架，但我需要添加更多断点。我需要在中等屏幕上从 4 列变成两列，在小型设备上减少到一列(我的最终目标，而不是下面的代码会做什么，但一次一个步骤)。我现在添加了以下类:.double-width-small-device

这是这个类的 css:

column[cols] {
    margin-right: 0;
    width: 100%;
    margin-bottom: @base-line;
    &.double-width-small-device {
        width: 50% !important;  
    }
}

箱子的宽度正确 (50%)，但堆叠在彼此下方，而不是两个和两个。竭尽全力想办法解决这个问题。

在这里你可以看到整个 grid.less 文件:https://github.com/imperavi/kube/blob/master/less/grid.less

希望有人能提供帮助，使很棒的 css 框架更好用。我相信这将是框架本身的一大特色......

谢谢!

Answer 1

我最终使用了嵌套行，我在此基础上更改了列的宽度和行的 flex-direction。

mixin.less:

.row() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;

    @media (max-width: @breakpoint-medium) {
        &.half-width-small-device {
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }
    }

    @media (max-width: @breakpoint-small) {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        &.double-width-small-device {
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
        }
    }
    @media (max-width: @breakpoint-xsmall) {
        &.double-width-small-device {
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }
    }
}

无网格

@media (max-width: @breakpoint-medium) {
    row > column[cols] {
        &[cols="1"],
        &[cols="2"],
        &[cols="3"],
        &[cols="4"],
        &[cols="5"],
        &[cols="6"],
        &[cols="7"],
        &[cols="8"],
        &[cols="9"],
        &[cols="10"],
        &[cols="11"],
        &[cols="12"] {
            .col(12);
        }
    }

    row {
        &.double-width-small-device {
            & column[cols] {
                margin-right: @grid-gutter !important;
                margin-bottom: @grid-gutter !important;
            }
            & column:last-child {
                margin-right: 0 !important;
                margin-bottom: @grid-gutter !important;
            }   
        }

    }
}

@media (max-width: @breakpoint-small) {
    row > column[cols] {
        .double-width-small-device {
            &[cols="1"],
            &[cols="2"],
            &[cols="3"],
            &[cols="4"],
            &[cols="5"],
            &[cols="6"],
            &[cols="7"],
            &[cols="8"],
            &[cols="9"],
            &[cols="10"],
            &[cols="11"],
            &[cols="12"] {
                .col(12);
            }
        }
    }

    row {

        margin-bottom: 0;

        & [offset] {
            margin-left: 0;
        }
        & column[cols] {
            margin-right: 0;
            width: 100%;
            margin-bottom: @base-line;
        }

        & row column:last-child {
            margin-bottom: 0;
        }
    }

    .width-1,
    .width-2,
    .width-3,
    .width-4,
    .width-5,
    .width-6,
    .width-7,
    .width-8,
    .width-9,
    .width-10,
    .width-11,
    .width-12 { width: 100%; }
}

@media (max-width: @breakpoint-xsmall) {

    row {
        &.double-width-small-device {
                margin-bottom: 0;
            & [offset] {
                margin-left: 0;
            }
            & column[cols] {
                margin-right: 0 !important;
                width: 100% !important;
                margin-bottom: @base-line !important;
            }

            & row column:last-child {
                margin-bottom: 0;
            }
        }
    }
}

感觉方向是对的，比较灵活

谢谢