Bootstrap中不修改DOM类通过父类覆盖媒体查询强制md布局方案

方法一：自定义父类覆盖样式（推荐） #

通过高优先级的CSS规则覆盖Bootstrap自带的栅格媒体查询规则，无需修改原有DOM上的类，仅通过给.parent加自定义类实现需求：

1. 先添加自定义CSS规则

/* 自定义类名可自行修改，强制目标元素始终应用col-md-12的宽度规则 */
.parent.force-md-mode #data {
  flex: 0 0 auto;
  width: 100%;
}

2. JS触发预览模式的逻辑

// 开启强制md模式
document.querySelector('.parent').classList.add('force-md-mode');
// 关闭强制md模式
document.querySelector('.parent').classList.remove('force-md-mode');

该方案只会作用于.parent下的目标元素，不会影响页面其他组件的响应式逻辑，符合要求。

方法二：修改viewport实现（不推荐） #

该需求可以通过修改viewport实现，但副作用较大，仅适合特殊场景使用：
Bootstrap默认md断点阈值为768px，只要将viewport宽度强制设置为768px，页面就会全局按md断点的规则渲染，代码如下：

// 开启强制md渲染
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=768');
// 恢复默认响应式
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1');

该方案缺点： #

• 会全局修改整个页面的响应式规则，不只是作用于目标#data元素
• 小屏设备上会出现横向滚动条，用户需要手动缩放才能查看完整页面，体验极差
• 如果你自定义过Bootstrap的默认断点值，需要同步修改viewport的width配置为对应断点阈值

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