zurb-foundation - 基于媒体查询的Zurb Foundation 4 large-3 to large-4

Question

我在一个项目中有以下情况

<div class="row">
    <div class="large-3"></div>
    <div class="large-3"></div>
    <div class="large-3"></div>
    <div class="large-3"></div>
</div>

我想使用媒体查询来修改以隐藏一定宽度的 div (large-3) 并让其他三个为 large-4 我该如何实现？

谢谢

Answer 1

应该有一种更有效的方法来做到这一点，但这是首先想到的：

示例 HTML：

<div class="row design-4-columns">
    <div class="large-3 columns"></div>
    <div class="large-3 columns"></div>
    <div class="large-3 columns"></div>
    <div class="large-3 columns"></div>
</div>

<div class="row design-3-columns">
    <div class="large-4 columns"></div>
    <div class="large-4 columns"></div>
    <div class="large-4 columns"></div>
</div>

你的CSS会是这样的：

/* Used to alter styles for screens at least 500px wide.*/
@media only screen and (min-width: 500px) {

    .design-4-columns {
         display: none !important; 
     }

}