html - 在 Skeleton CSS 中更改断点

Question

我想更改 Skeleton CSS 网格中的断点。本质上，一旦浏览器达到 1000 像素，我希望右侧的列堆叠在左侧六列下方。这是我正在使用的示例代码:

<section>
    <div clas="container">
        <div class="row">
            <div class="six columns">
                <h2>Lorem Ipsum Dolar</h2>
            </div>
            <div class="five columns offset-by-one">
                This is my fifth column that I want to be positioned under the six columns area when the browser screen hits 1000px. This should be full width as well.
            </div>
        </div>
    </div>
</section>

关于如何做到这一点有什么想法吗？或者是否可以设置一个媒体查询，使左边的五列堆叠在前六列之下？

Answer 1

使用媒体查询很容易。

.five.columns {
width: 100%;
margin-left: 0px;
}

@media (min-width: 1000px) {
.five.columns {
    width: 39.3%;
}
}

可能需要稍微调整一下，但它确实有效。