如何让媒体查询断点正常工作？解决Bootstrap布局图片响应问题

问题背景 #

桌面端时，一张旋转图片放置在另一区块后方；需求是当视口缩小到平板（≤1020px）及移动端尺寸时，图片占满全屏并恢复正常角度。

当前遇到的问题：在1020px断点处，图片仅恢复了正常角度，但仍和其他元素处于同一行并缩小尺寸，直到触发移动端断点才独占一行。

已尝试的CSS代码：

@media screen and (max-width: 1020px){
  .title-img{
    width: 60% !important; 
    position:static !important;
    transform: rotate(0) !important; 
  }
}

补充说明：已在文档头部添加<meta>标签，问题源于使用Bootstrap网格系统的响应式布局设置。

修复方案 #

1. 重置图片所在Bootstrap列的布局 #

因为Bootstrap的网格列默认会在指定断点下分配宽度，你需要强制让图片所在的列在≤1020px时独占整行：
找到图片所在的列容器（比如带有col-lg-*类的元素），添加以下媒体查询样式：

@media screen and (max-width: 1020px){
  .title-img-col { /* 替换成你实际的列容器类名 */
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

或者直接给列容器添加Bootstrap的col-12类，它会在所有断点下强制占满整行，再结合你的自定义媒体查询调整特殊样式。

2. 调整图片自身的CSS属性 #

把图片宽度改为100%，并确保它是块级元素，才能占满容器：

@media screen and (max-width: 1020px){
  .title-img{
    width: 100% !important; 
    position: static !important;
    transform: rotate(0) !important;
    display: block !important;
  }
}

3. 优化建议 #

• 尽量减少!important的使用：可以通过提升选择器优先级（比如用.title-img-col .title-img这种组合选择器）来覆盖原有样式，避免样式冲突。
• 对齐Bootstrap默认断点：如果可以，考虑将1020px调整为Bootstrap的默认断点（比如992px对应lg断点），这样能更好地兼容Bootstrap的内置响应式类。

内容的提问来源于stack exchange，提问作者Viktorija