Bootstrap4响应式动态选项卡（卡片效果）详解
先看效果图。卡片会随着屏幕的缩放的缩放而缩放。
1.逻辑详解。
利用Bootstrap4网格系统与弹性盒子布局来实现效果。
比较重要的一点是：在响应式网站中，我们可能需要某些元素会随着屏幕的变化而变化，有些元素可能不会随着屏幕的变化而变化。例如，本例中，包含“年利率”的盒子，就不会随着屏幕的变化，宽度发生变化。
2.详细代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态选项卡</title>
<link rel="stylesheet" href="./lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="dongtai.css">
</head>
<body>
<div class="container">
<h2>选项卡切换</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active">
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 active d-flex flex-row">
<div class="left">
<h5>新手体验标0650期</h5>
<div class="row">
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
</div>
</div>
<div class="right d-flex flex-column justify-content-center align-items-center">
<p class="percent">8
<sub>%</sub>
</p>
<p class="rate">年利率</p>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 active d-flex flex-row">
<div class="left">
<h5>新手体验标0650期</h5>
<div class="row">
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
</div>
</div>
<div class="right d-flex flex-column justify-content-center align-items-center">
<p class="percent">8
<sub>%</sub>
</p>
<p class="rate">年利率</p>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 active d-flex flex-row">
<div class="left">
<h5>新手体验标0650期</h5>
<div class="row">
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
</div>
</div>
<div class="right d-flex flex-column justify-content-center align-items-center">
<p class="percent">8
<sub>%</sub>
</p>
<p class="rate">年利率</p>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 active d-flex flex-row">
<div class="left">
<h5>新手体验标0650期</h5>
<div class="row">
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
</div>
</div>
<div class="right d-flex flex-column justify-content-center align-items-center">
<p class="percent">8
<sub>%</sub>
</p>
<p class="rate">年利率</p>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 active d-flex flex-row">
<div class="left">
<h5>新手体验标0650期</h5>
<div class="row">
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
</div>
</div>
<div class="right d-flex flex-column justify-content-center align-items-center">
<p class="percent">8
<sub>%</sub>
</p>
<p class="rate">年利率</p>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 active d-flex flex-row">
<div class="left">
<h5>新手体验标0650期</h5>
<div class="row">
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
<div class="col-md-6 col-6">
<p class="investment">起投金额（元）</p>
<p class="num">0.01
<sub>万</sub>
</p>
</div>
</div>
</div>
<div class="right d-flex flex-column justify-content-center align-items-center">
<p class="percent">8
<sub>%</sub>
</p>
<p class="rate">年利率</p>
</div>
</div>
</div>
</div>
<div id="menu1" class="container tab-pane fade">
<br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade">
<br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam.
</p>
</div>
</div>
</div>
<script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/bootstrap/bootstrap.min.js"></script>
<script src="./lib/popper/popper.min.js"></script>
</body>
</html>将left部分的flex属性设置为：flex:1 ；right部分设置为固定宽高，这里为120px;
需要注意的地方：
1.d-flex 设置为弹性盒子后有两个值。（1）flex-row水平排列（2）flex-column垂直排列。
2.分清主轴和侧轴的方向。若设置flex-row为主轴，则X轴为主轴，若设置flex-column为主轴，则Y轴为主轴。
3.主轴对齐方式justify-content-*（*允许的值有start， end，center，between，around）
侧轴对齐方式align-items-*（*允许的值有start，end，center，baseline）
4.::before ,::after 均为inline元素，若想设置宽高，设置display：block；
5.设置更好的相应式。将需要变化的元素设置为flex：1，需要固定的元素设置为固定值。
6.bootsrap 某些标签有自带的margin和padding，使用时要注意。
这样就能实现响应式的卡片效果布局方式。