如何将Zurb Foundation的网格与自定义百分比分开？

3 回答

• 0

  您确定需要拆分行 - 而不仅仅是使用行内的列吗？

  如果它是您的选项，您只需将12列网格更改为10列网格即可 .

  使用Foundation SASS，只需更改此项

  $total-columns: 12;
  

  至

  $total-columns: 10;
  

  在 _settings.scss

  现在你有一个10列网格，并使20％| 80％的专栏随时为您服务 . 瞧！

  回复于 2024-04-29T05:02:43+08:00
• 0

  <div class="row">
     <div class="side">
  .
  .
  .
     </div>
     <div class="main">
  .
  .
  .
     </div>
  

  CSS

  .side{
   width:20%;
  }
  .main{
  width:80%;
  }
  

  回复于 2024-04-29T05:02:43+08:00
• 0

  实现这一目标的一种方法（除了上面提到的仅使用您自己的类）是在您的唯一容器中定位基础的内置列 .

  <div id="unique-container">
    <div class="large-2 columns">
    <!--  your code -->
    </div>
    <div class="large-10 columns">
    <!--  your code -->
    </div>
  </div>
  

  CSS

  #unique-container.large-2 {
    width: 20%;
  }
  
  #unique-container.large-10 {
    width: 80%;
  }
  

  希望这可以帮助 .

  回复于 2024-04-29T05:02:43+08:00