我在使用 Zurb 的 Foundation 时遇到了网格问题。我的计划:在小型设备上显示两个相邻的 ul 元素(每个 6 列),在中等设备上我希望所有四个元素都在一行中。 我的 HTML:
<footer>
<div class="row">
<ul>
<li>Headline</li>
<li>Link</li>
</ul>
<ul>
<li>Headline</li>
<li>Link</li>
</ul>
<ul>
<li>Headline</li>
<li><a href="#">Link</a></li>
</ul>
<ul>
<li>Headline</li>
<li><a href="#">Link</a></li>
</ul>
</div>
</footer>
我的样式表使用 Sass,文件如下所示:
footer {
// bg-images and stuff
.row {
position: relative;
z-index: 2;
}
ul {
@include grid-column(6);
li {
list-style: none;
}
@media #{$medium-up} {
@include grid-column(3);
}
}
}
问题来了:在小型设备上,每个 ul 都在自己的行中,在中等和更高的设备上,连续三个,第四个是下一个。 有什么建议吗,我在哪里犯了错误?
非常感谢! 弗洛里安
编辑:输出的 CSS:
@media only screen and (min-width:40.063em) {
footer ul {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
width: 25%;
float: left; }}
还有这个:
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
最佳答案
在基础中使用网格时,您必须指定列 div:
在您的示例中,要让小型设备显示 2 个 uls,让中型设备显示 4 个 uls,您需要这样做:
<footer>
<div class="row">
<div class="small-6 medium-3 columns">
<ul>
<li>Headline</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="small-6 medium-3 columns">
<ul>
<li>Headline</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="small-6 medium-3 columns">
<ul>
<li>Headline</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="small-6 medium-3 columns">
<ul>
<li>Headline</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="small-6">
</div>
<div class="row">
<div class="footer-sec">
<p>© my site | and so on</a></p>
</div>
</div>
</footer>
使用 foundation 时,您不需要任何自定义样式表即可实现此目的。无需编写自定义样式表即可轻松完成此操作是基金会功能的一部分。
关于css - 基础网格不适合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26892708/