采用ZURB Foundation的半流体设计？

3 回答

• 1

  使用Foundation 4我只是添加了

  .row { max-width: 100%; }
  

  风格 . 适用于 rows 以及 top-bar

  回复于 2024-04-25T15:54:49+08:00
• 1

  如果您使用SASS和基础版本5，则可以使用以下内容自定义行：

  $row-width: 100%;
  

  回复于 2024-04-25T15:54:49+08:00
• 0

  基础3的一个好处是它使用SASS构建，因此网格系统的CSS完全依赖于变量 .

  行的宽度在scss/foundation/components/_grid.scss中设置样式：

  /* The Grid ---------------------- */
  
  .row { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto;
    .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); }
  
    &.collapse {
      .column, .columns { padding: 0; }
    }
    .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2));
      &.collapse { margin: 0; }
    }
  }
  

  行的总宽度依赖于 $rowWidth 变量，而该变量又在scss/foundation/_settings.scss中定义：

  // Grid Settings
  
  $rowWidth: 1000px !default;
  $columnGutter: 30px !default;
  $totalColumns: 12 !default;
  $mobileTotalColumns: 4 !default;
  $blockGridElements: 12 !default; // Highest number of block grid elements, Maximum of 24 supported
  

  所以 you need to change the $rowWidth variable to whatever size you need .

  回复于 2024-04-25T15:54:49+08:00