不完整的行（Incomplete Rows）

优质

小牛编辑

126浏览

2023-12-01

描述 (Description)

当行不包含最多12个列时，Foundation会自动向右浮动最后一个元素。您可以将.end类包含在最后一个元素中，以使元素向左浮动。

例子 (Example)

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

<!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>
      <h2>Incomplete rows example</h2>
      <div class = "row">
         <div class = "small-4 columns" style = "background-color:#808000;">
            small-4 columns
         </div>
         <div class = "small-4 columns" style = "background-color:#8BD6EE;">
            small-4 columns
         </div>
      </div>
      <div class = "row">
         <div class = "small-4 columns" style = "background-color:#8BD6EE;">
            small-4 columns
         </div>
         <div class = "small-4 columns end" style = "background-color:#808000;">
            small-4 columns end
         </div>
      </div>
   </body>
</html>