如何在Bootstrap 4中实现不同屏幕下Card-Title及卡片图片的响应式适配？

作为刚接触网页设计的新手，你碰到的小屏幕上卡片图片和标题过大的问题太常见啦！Bootstrap 4自带了很多响应式工具，也支持自定义样式，我给你两种实用方案：

方案1：用Bootstrap内置工具快速解决 #

调整卡片图片 #

给图片添加img-fluid类，这是Bootstrap专门用来做响应式图片的类，它会自动让图片宽度适应父容器，高度按比例缩放，小屏幕下自然就不会过大了：

<img class="card-img-top-a mx-auto d-block mt-5 img-fluid" src="img/a.png">

调整card-title字体大小 #

Bootstrap 4可以结合响应式标题类实现不同屏幕下的字体变化：比如让小屏幕下标题用更小的h6样式，大屏幕保持h5的大小。修改你的标题代码：

<h5 class="card-title text-center mt-5 font-weight-bold h6-xs h5-sm">Pixel perfect design</h5>

这里的h6-xs表示在xs（<576px）屏幕下使用h6的字体大小，h5-sm表示在sm（≥576px）及以上屏幕使用h5的字体大小，完美适配不同尺寸。

方案2：自定义CSS媒体查询（更灵活可控） #

如果需要更精确的尺寸调整（比如指定具体的像素值），可以写自定义的CSS媒体查询，对应Bootstrap 4的官方断点：

• xs：<576px
• sm：≥576px
• md：≥768px
• lg：≥992px

把这段CSS加到你的样式文件里：

/* 小屏幕（xs）下的样式 */
@media (max-width: 575.98px) {
  .card-img-top-a {
    max-width: 70%; /* 你可以自己调整这个百分比 */
  }
  .card-title {
    font-size: 1rem; /* 小屏幕标题字体大小 */
  }
}

/* 中等及以上屏幕保持原样式 */
@media (min-width: 576px) {
  .card-img-top-a {
    max-width: 100%;
  }
  .card-title {
    font-size: 1.25rem; /* Bootstrap默认h5的字体大小 */
  }
}

这样就能完全按照你的需求控制不同屏幕下的样式了。

把上面的修改应用到你的代码里，小屏幕的显示问题就能解决啦！

内容的提问来源于stack exchange，提问作者LaĦiru M Pąrąnąvithąną