Bootstrap4响应式动态选项卡（卡片效果）详解
Bootstrap4响应式动态选项卡（卡片效果）详解
先看效果图。卡片会随着屏幕的缩放的缩放而缩放。
1.逻辑详解。
利用Bootstrap4网格系统与弹性盒子布局来实现效果。
比较重要的一点是：在响应式网站中，我们可能需要某些元素会随着屏幕的变化而变化，有些元素可能不会随着屏幕的变化而变化。例如，本例中，包含“年利率”的盒子，就不会随着屏幕的变化，宽度发生变化。
2.详细代码。
动态选项卡
选项卡切换
新手体验标0650期
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
8
%
年利率
新手体验标0650期
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
8
%
年利率
新手体验标0650期
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
8
%
年利率
新手体验标0650期
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
8
%
年利率
新手体验标0650期
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
8
%
年利率
新手体验标0650期
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
起投金额（元）
0.01
万
8
%
年利率
将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，使用时要注意。
这样就能实现响应式的卡片效果布局方式。