如何使用foundation4完成引导网格系统的“.col-xs-”或“smallgrid”？答案

【问题标题】：How to accomplish what bootstrap grid system does with it's ".col-xs-" or "smallgrid" with foundation4?如何使用foundation4完成引导网格系统的“.col-xs-”或“smallgrid”？
【发布时间】：2013-12-02 16:58:34
【问题描述】：

我希望用自定义 CSS 构建一个网站，并且不使用框架，只是为了增加我对 CSS 的控制。我希望我的整个网站都保留其布局，并且无论使用什么设备都可以查看。 Foundation 使用它的“smallgrid”并使用“.col-xs-”引导。如果没有框架，我该怎么做？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 zurb-foundation

【解决方案1】：

Foundation 和 Bootstrap 都使用相同的方式为您提供灵活的网格：它们以百分比固定所有可能的列宽，并使用媒体查询在移动/平板电脑/桌面网格之间切换（small、medium 和 @987654328 @ 用于 Foundation，xs、sm、md 和 lg 用于 Bootstrap。

查看这些链接以了解更多信息：

引导程序 3：

// Mobile first : Bootstrap display the content with -xs columns
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 {
    float: left;
}
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666666666666%; }
.col-xs-10 { width: 83.33333333333334%; }
.col-xs-9  { width: 75%; }
.col-xs-8  { width: 66.66666666666666%; }
.col-xs-7  { width: 58.333333333333336%; }
.col-xs-6  { width: 50%; }
.col-xs-5  { width: 41.66666666666667%; }
.col-xs-4  { width: 33.33333333333333%; }
.col-xs-3  { width: 25%; }
.col-xs-2  { width: 16.666666666666664%; }
.col-xs-1  { width: 8.333333333333332%; }

// if we reach 768px, let's use -sm columns
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11 {
      float: left;
  }
  .col-sm-12 { width: 100%; }
  .col-sm-11 { width: 91.66666666666666%; }
  ...
}
// ... etc with -md and -lg columns

基础5：

// Mobile first : Foundation display the content with -small columns
@media only screen {
    .column,
    .columns {
      position: relative;
      padding-left: 0.9375rem;
      padding-right: 0.9375rem;
      float: left; }
    .small-1 { width: 8.33333%; }
    .small-2 {width: 16.66667%; }
    .small-3 { width: 25%; }
    .small-4 { width: 33.33333%; }
    .small-5 { width: 41.66667%; }
    .small-6 { width: 50%; }
    .small-7 { width: 58.33333%; }
    .small-8 { width: 66.66667%; }
    .small-9 { width: 75%; }
    .small-10 { width: 83.33333%; }
    .small-11 { width: 91.66667%; }
    .small-12 { width: 100%; }
}

// If we reach 40.063em, let's use -medium columns
@media only screen and (min-width: 40.063em) {
    .column,
    .columns {
      position: relative;
      padding-left: 0.9375rem;
      padding-right: 0.9375rem;
      float: left; }
    .medium-1 { width: 8.33333%; }
    .medium-2 {width: 16.66667%; }
    ...
}

// ...etc with -large columns

【讨论】：

【解决方案2】：

您只需几行即可编写自己的网格。首先决定你喜欢多少列，然后创建类似下面的 4 列网格：

.col-1, .col-2, col-3, .col-4 {
    float: left;
    /* So that empty columns don't collapse */
    min-height: 1px;
    padding: 0 16px;
    /* Change tje box-model to set columns size in pixels */
    webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.col-1 { width: 25%; }
.col-2 { width: 50%; }
.col-3 { width: 75%; }
.col-4 { width: 100%; }

这主要是您需要的。我可能想包装你的列并使用 clearfix 技巧清除浮动。如果您愿意，我有一个名为Fluidable 的独立网格系统，仅此而已。

【讨论】：