0

我正在为一个站点使用 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 框架更好用。我确实相信这将是框架本身的一个很棒的功能......

谢谢！

4

1 回答 1

0

我最终使用了嵌套行，我在其中更改了列的宽度和基于此的行的 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;
            }
        }
    }
}

我感觉是朝着正确方向迈出的一步，而且非常灵活

谢谢

于 2015-11-14T07:36:44.853 回答