Bootstrap Card卡片不同屏幕宽度自适应
Bootstrap卡片宽度由外层col容器控制，而非card自身。正确结构需将col作为row的直接子元素，利用col-*或自动布局列实现响应。需注意内部溢出问题，如未添加img-fluid和text-break会影响布局。Flex工具类可替代col实现灵活控制。
很多同学在制作Bootstrap卡片布局时，习惯性地以为只要给card添加一个class就能控制宽度，结果折腾半天发现根本不起作用。其实关键在于那层“包装”——真正让卡片随屏幕宽度变化的核心，是包裹它的col-*类容器，而不是card本身。必须将卡片放在row内、作为col的直接子元素，col类才能生效。否则，即使写再多col-md-6，也只是个摆设。
卡片宽度的控制核心：col类而非card本身
Bootstrap的card本身并不具备响应式宽度属性，它只负责展示内容。真正实现“宽窄变化”的，是外层的col容器。简单来说，栅格系统才是幕后操盘手。
一个常见的错误写法是： 所以请记住，卡片宽度的核心在于col。它就像卡片的“相框”，相框多大，照片才能呈现多大。 如果需要多张卡片在一行内自动均分，并随屏幕缩放自动调整排列，使用不带数字的 即使外层col类用得再熟练，如果卡片内部的内容跑出来捣乱，布局依然会崩溃。例如图片没有加 解决方案有一个优先级顺序：先检查每张卡片内的图片是否添加了 有些场景下，标准栅格布局可能不够用，例如需要非标准比例（3:7）、不对称布局或卡片数量动态变化。此时使用 实际项目中最容易被忽略的，是卡片内部元素对父容器宽度的反向影响——即使
col-前缀控制断点：例如col-sm-12 col-md-6 col-lg-4，小屏幕全宽、中屏幕半幅、大屏幕三栏自动布局列：让卡片等宽并自适应排列
col写法比手动计算col-lg-3等更可靠。它会自动计算父容器宽度，然后平均分配。
col（无后缀）= 等分父容器，每张卡片同宽col-sm = 小屏幕及以上等分；col-md = 中屏幕及以上等分row-cols-*辅助类来控制每行显示数量，否则小屏幕下卡片可能会挤成一长条卡片内部溢出：最常见也最容易忽略的陷阱
img-fluid，它会溢出容器，导致整行变宽；再比如长文本（尤其是英文或URL）没有加text-break或text-wrap，也会把卡片撑变形；还有卡片的头部或尾部使用了position: absolute或display: inline-block，脱离文档流，这时col类根本无法准确计算宽度。img-fluid；然后在card-body上补充text-break；最后确认有没有意外写死width: 100%覆盖了默认行为。这三步走完，九成九的溢出问题都能解决。想要更灵活的宽度控制？试试Flex工具类
d-flex配合flex-*类，会比col更灵活可控。
flex-grow-0阻止拉伸，w-25固定宽度为25%，flex-fill填满剩余空间row/col的嵌套层级，特别适合侧边栏+主卡片这类非网格场景col-lg-4写得再精准，一张没有加img-fluid的图片就能让整行错位。响应式布局并非只调整外层类就万事大吉。