我想要有一列5列,只有1列用于小型设备屏幕,宽度小于480px.
我是新兴的zurb基金会,仍然在学习.
小提琴示例http://jsfiddle.net/V7TuY/1/
<div class="row"> <div class="small-6 medium-3 large-3 columns"> <img src="http://placehold.it/480x600&text=[img 1]" /> <p></p> </div> <div class="small-6 medium-3 large-3 columns"> <img src="http://placehold.it/480x600&text=[img 2]" /> <p></p> </div> <div class="small-6 medium-3 large-3 columns"> <img src="http://placehold.it/480x600&text=[img 3]" /> <p></p> </div> <div class="small-6 medium-3 large-3 columns"> <img src="http://placehold.it/480x600&text=[img 4]" /> <p></p> </div> <div class="small-6 medium-3 large-3 columns"> <img src="http://placehold.it/480x600&text=[img 5]" /> <p></p> </div>
更好的这种事情与列或列表ul li
解决方法
在你的例子中,你有5< div>每行中等3和大3 = 15单位.基金会将配合前4名(4 * 3 = 12单位),然后第五名将被推到下面.
一个想法适合您的5个项目,是给所有的中等2宽度(10个单位),并将该行左偏移一个单位(类medium-offset-1
on first element),并告诉基金会第五个元素是你的行中的最后一个(end
on the last element课).
例如:
<div class="row"> <div class="small-12 medium-2 medium-offset-1 columns"> <img src="http://placehold.it/480x600&text=[img 1]"/> </div> <div class="small-12 medium-2 columns"> <img src="http://placehold.it/480x600&text=[img 1]"/> </div> <div class="small-12 medium-2 columns"> <img src="http://placehold.it/480x600&text=[img 1]"/> </div> <div class="small-12 medium-2 columns"> <img src="http://placehold.it/480x600&text=[img 1]"/> </div> <div class="small-12 medium-2 columns end"> <img src="http://placehold.it/480x600&text=[img 1]"/> </div> </div>
中等偏移-1的要点是将内容置于中心位置(以一种时尚之后):您有10个单位适合可能的位置.偏移量为1,并且使用最终将使您在你的内容但是,如果您希望它位于页面的左侧,请从上面的示例中删除medium-offset-1类.
注意 – 您在这里确实只需要中等2和中等偏移量-2,默认情况下也适用于大型网格,除非被类big- *或large-offset- *覆盖.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。