Question

我有一个具有right类的按钮，因此在页面的桌面视图中它与右侧对齐，但当页面处于移动视图中时，我想禁用right类从中并使其居中。我如何在基金会这样做？

    <div class="row">
        <div class="large-12 column">
            <div class="panel">
                <h4>Get in touch!</h4>

                <div class="row">
                    <div class="large-9 column">
                        <p>We'd love to hear from you!</p>
                    </div>
                    <div class="large-3 column">
                        <a href="#" class="radius button right">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

我想在移动视图中居中的元素是Contact Us按钮。

Answer 1

我不确定zurb-foundation，但@media css是单向响应页面的处理方式。这应该有所帮助。 w3c page on @media

我注意到帖子之后的代码并且没有css，很难知道需要改变什么，但是将@media放在css的末尾是你需要做的。

像这样的东西。

#top{height:auto;border:double #ccc;height:150px;width:60%;margin:10px auto; }
#center_collum{ border:solid px;min-height:650px;width:57.0%;margin:0% auto;padding-  left:1em;}

@media screen and (min-width:1600px){
body{font-size:100%; }
#top{width:40% }

 }
 @media screen and (max-width:1600px){
body{font-size:100%; }
#top{width:50% }
#center_collum{width:56%; }
 }
@media screen and (max-width:960px){
body{font-size:60%; }
#top{width:70% }
#center_collum{width:54%; }
}
 @media screen and (max-width:440px){
body{font-size:50%; }
#top{width:100% }
#center_collum{width:50%; }
hr{margin-top:1.8em;width:100%}
}

以上只是我使用的一块css工作方式的一个例子。它适用于显示器的屏幕尺寸，你想要的是这样的。

  @media (device-some_attribute_value)

该链接解释了它是如何工作的。

如果你想真正改变课程，可以使用JavaScript

element.setAttribute("class","new_class")

在Foundation Zurb中，如何使某个课程仅对某些屏幕尺寸有效？

1 个答案: