如何在指定屏幕尺寸下禁用或修改HTML代码？附Bootstrap示例

针对你想要在特定屏幕尺寸（比如576px）下禁用或修改HTML元素的需求，我整理了两种最常用的实现方式，结合你的Bootstrap代码示例来详细说明：

因为你用了Bootstrap，它的sm断点刚好是576px（即屏幕宽度≥576px时触发sm及以上样式），所以我们可以针对小于576px的屏幕写媒体查询规则：

1. 直接隐藏元素 #

如果只是想在小屏幕下隐藏.container，可以用display: none，加上!important确保覆盖Bootstrap的默认样式：

@media (max-width: 575.98px) {
  .container {
    display: none !important;
  }
}

或者更简洁的方式：直接利用Bootstrap自带的响应式隐藏类，给你的.container添加d-none d-sm-block，这样不用写额外CSS：

<div class="container d-none d-sm-block">
  <!-- 你的内容 -->
</div>

2. 修改元素样式 #

如果不想隐藏，而是调整.container的样式（比如取消最大宽度、修改内边距），可以这样写：

@media (max-width: 575.98px) {
  .container {
    max-width: 100%; /* 让容器占满屏幕宽度 */
    padding-left: 15px;
    padding-right: 15px;
    background-color: #f5f5f5; /* 示例：修改背景色 */
  }
}

如果需要更深度的操作——比如彻底删除元素、修改元素的HTML结构、切换多个类名组合，CSS就不够用了，这时候用JavaScript监听屏幕尺寸变化来操作DOM：

示例代码： #

// 定义核心处理函数
function adjustElementForScreen() {
  const container = document.querySelector('.container');
  if (!container) return; // 避免找不到元素报错

  const isSmallScreen = window.innerWidth < 576;
  
  if (isSmallScreen) {
    // 方案1：隐藏元素
    container.style.display = 'none';
    
    // 方案2：替换类名（比如把container换成fluid布局）
    container.classList.remove('container');
    container.classList.add('container-fluid');
    
    // 方案3：彻底删除元素
    // container.remove();
  } else {
    // 恢复默认状态
    container.style.display = 'block';
    container.classList.add('container');
    container.classList.remove('container-fluid');
  }
}

// 页面加载时先执行一次
window.addEventListener('load', adjustElementForScreen);

// 监听窗口 resize 事件，添加防抖避免频繁触发
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(adjustElementForScreen, 200);
});

注意事项： #

• CSS方法性能更好，优先考虑样式层面的需求用CSS解决；
• JavaScript方法适合需要动态改变DOM结构的场景，记得加防抖优化，避免窗口拖动时频繁触发函数；
• 以上两种方法都可以扩展到任意HTML元素，只需要修改选择器（比如把.container换成你的目标元素选择器即可）。

内容的提问来源于stack exchange，提问作者Aref.Heydari