javascript – zurb foundation 3中的固定宽度列

如何在zurb foundation 3中实现固定列网格？目前,基金会的网格是流动的,并且基于百分比.我想实现类似于bootstrap(非流体)网格的东西,其中只有4个posibilites显示你的网格如何显示(至少直到它下降到移动,这是流动的)

我想保留基础网格的功能(和语义),所以我不想简单地将它换成自举网格.

我知道这与纯粹的“响应”网格理论相悖,但是处理现实世界的客户及其需求使我倾向于拥有可预测的有限网格行为(自适应网格？)

解决方法:

您需要在重写@media声明中将CSS中的列和行宽重置为固定位置.比如你有的地方

.row { width: 100%;}
.one, .row .one { width: 8.33333%; }    
.two, .row .two { width: 16.66667%; }    
.three, .row .three { width: 25%; }

你现在需要,

@media screen and min-width(960px){
    .row { width: 960px;}
    .one, .row .one { width: 80px /* 960 x 8.33333% */ }    
    .two, .row .two { width: 160px; /* 960 x 8.33333% */}    
    .three, .row .three { width: 240px; /* 960 x 8.33333% */}
}

以下是更新后的问题之前的答案.

在页面周围添加包装器div

<div class="wrapper">
<!-- Page content and styles go here -->
</div>

然后在你的CSS中你应该包括

.wrapper {
    width: 98%; 
    max-width: 1200px;
}

标签：html,javascript,css3,zurb-foundation,responsive-design
来源： https://codeday.me/bug/20190901/1785773.html