如何使用 Foundation 5 添加或修改 css 属性以交换短代码

Question

我正在尝试学习Foundation 5，并正在尝试交换。

我使用了提供的默认短代码，并成功地让我的图像按布局交换。

我想知道是否可以将CSS属性（例如修改边距或边框颜色）更改为正在切换的图像，所以我想这可能是添加到交换短代码中的东西？

我尝试将CSS属性添加到样式表中，即：

div.small-12 div.logo img {border:1px solid blue;}
div.medium-6 div.logo img {border:1px solid red;}  

结果始终是最后声明。也许这是我的CSS。

无论如何，任何反馈将不胜感激。

Answer 1

如果Foundation在HTML中的元素中添加/删除类，你的CSS就可以完成这项工作 - 但它（大多数）以相反的方式工作 - 你将类添加到元素中，Foundation使用一些（复杂的）CSS来设置它们的样式。

你想要的仍然可以实现 - 使用基金会使用的"媒体查询"：

假设您没有更改默认的基础媒体查询，以下 CSS 可能会为中小型屏幕完成这项工作：

 @media only screen and (max-width: 40em) {
        img.my_class {border:1px solid blue;}
 }
/* ... will apply blue border on small screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
        img.my_class {border:1px solid red;}
}
/* ..will apply a red border for medium screens */

.. 然后将类名my_class应用于 HTML 中的 img 元素

我建议看看 SASS（如果你还没有的话） - 它使做这些类型的事情变得更加简单:)基金会网站上有一些很好的视频会有所帮助