Zurb Foundation 4大型3到大型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）一定宽度，让其他三个为big-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; 
     }

}