【实例】利用flex-grow-1特性，制作手风琴效果！
代码比较粗糙但可以用， 直接上代码：
1 <!DOCTYPE html> 2 <html lang="zh-cmn-Hans"> 3 <head> 4 <title>网申传媒</title> 5 <meta name="keywords" content="页面关键词"> 6 <meta name="description" content="页面描述"> 7 <meta charset="utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 9 <meta name="renderer" content="webkit"> 10 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 11 <link rel="shortcut.icon" href="/favicon.ico" /> 12 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> 13 <style> 14 .flex-grow-1 { 15 width: 0px; 16 } 17 </style> 18 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> 19 <!--[if lt IE 9]> 20 <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> 21 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> 22 <![endif]--> 23 24 </head> 25 <style> 26 .demo div { 27 width: 150px; 28 height: 300px; 29 transition: all .4s ease-in-out; 30 } 31 </style> 32 33 <body> 34 <div class="container d-flex demo"> 35 <div class="flex-grow-1 bg-danger text-white text-center"> 36 1 37 </div> 38 <div class="bg-info text-white text-center"> 39 2 40 </div> 41 <div class="bg-dark text-white text-center"> 42 3 43 </div> 44 <div class="bg-primary text-white text-center"> 45 4 46 </div> 47 <div class="bg-warning text-white text-center"> 48 5 49 </div> 50 </div> 51 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> 52 <script> 53 $('.demo div').mouseenter(function(){ 54 $('.demo div').removeClass('flex-grow-1'); 55 $(this).addClass('flex-grow-1'); 56 }); 57 </script> 58 </body> 59 </html>
