Nesting

优质

小牛编辑

124浏览

2023-12-01

描述 (Description)

我们可以将网格列嵌入列中。在一列中，我们可以在其中定义更多列。

例子 (Example)

以下示例演示了在Foundation中使用nesting -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
   </head>
   <body>
      <div class = "row">
         <h2>Grid - Nested Columns</h2>
         <div class = "small-9 columns"  style = "background-color:#8BD6EE;">
            <h4>Main column small-9</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <div class = "row">
               <div class = "small-6 columns"  style = "background-color:#808000;">
                  Nested inside the small-9 class
               </div>
               <div class = "small-6 columns"  style = "background-color:#FF6347;">
                  Nested inside the small-9 class 
               </div>
            </div>
         </div>
         <div class = "small-3 columns" style = "background-color:#808000;">Column small-3 class
            <div class = "row">
               <div class = "small-8 columns" style = "background-color:#7B68EE;">
                  Nested inside small-3 class
               </div>
            </div>
         </div>
      </div>
   </body>
</html>