Fondation - Lignes incomplètes

La description

Foundation fait flotter automatiquement le dernier élément vers la droite lorsque les lignes n'incluent pas de colonnes jusqu'à 12. Vous pouvez inclure la classe .end jusqu'au dernier élément pour faire flotter l'élément vers la gauche.

Exemple

L'exemple suivant montre l'utilisation de lignes incomplètes dans Foundation -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>

      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus incomplete_rows.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.