使用JavaScript修改Bootstrap元素宽度后列功能失效求助

问题根源 #

Bootstrap的响应式列布局依赖浏览器视口宽度的媒体查询，只有当视口宽度触发预设断点（如md对应768px）时，列布局才会切换。你通过拖拽修改的是section容器的宽度，而非视口宽度，因此媒体查询不会触发，列自然不会从4列变为2列。

另外，你的JS代码存在一处拼写错误：const width = { legt: null, right: null }里的legt应为left，会导致左侧宽度获取异常，需先修正。

解决方案1：动态切换Bootstrap列类 #

通过JS监听section的宽度变化，手动切换列元素的Bootstrap类，模拟响应式效果：

步骤1：调整列元素的基础类 #

给section内的所有列元素添加一个统一的标识类（如dynamic-col），同时保留初始的4列类（如col-md-3）：

<section id="section" class="h-100 pb-3 ps-3" style="width:70%">
  <div class="row">
    <div class="dynamic-col col-md-3">列1</div>
    <div class="dynamic-col col-md-3">列2</div>
    <div class="dynamic-col col-md-3">列3</div>
    <div class="dynamic-col col-md-3">列4</div>
  </div>
</section>

步骤2：添加宽度判断与类切换逻辑 #

在拖拽的mousemove或mouseup事件中，加入列类切换的代码：

// 修正拼写错误
const width = {
  left: null,
  right: null
}

var start_pos, diff_pos = 0;
var is_mouse_down = false;
var is_mouse_move = false;
var nav = document.getElementById('nav_panel');
var content = document.getElementById('section');
var division = document.getElementById('division');

// 新增：更新列布局的函数
const updateColumnLayout = () => {
  const sectionWidth = content.clientWidth;
  const columns = content.querySelectorAll('.dynamic-col');
  // 自定义断点：当section宽度小于600px时切换为2列，可按需调整
  const breakpoint = 600;

  columns.forEach(col => {
    if (sectionWidth < breakpoint) {
      col.classList.remove('col-md-3');
      col.classList.add('col-md-6');
    } else {
      col.classList.remove('col-md-6');
      col.classList.add('col-md-3');
    }
  });
}

const mousedown = (e) => {
  e.preventDefault();
  const el = e.target;
  if (el.id == 'division') {
    start_pos = e.clientX;
    width.left = nav.clientWidth;
    width.right = content.clientWidth;
    is_mouse_down = true;
  }
}

const mousemove = (e) => {
  e.preventDefault();
  if (is_mouse_down) {
    is_mouse_move = true;
    diff_pos = e.clientX - start_pos; // 修正原代码的event为e
    var sum = width.left + width.right + division.clientWidth;
    nav.style.width = ((width.left + diff_pos - division.clientWidth)*100/sum)+'%';
    content.style.width = ((width.right - diff_pos)*100/sum)+'%';
    // 实时更新列布局
    updateColumnLayout();
  }
}

const mouseup = (e) => {
  e.preventDefault();
  if(is_mouse_down){
    is_mouse_down = false;
    if(is_mouse_move){
      is_mouse_move=false;
      var sum = width.left + width.right + division.clientWidth;
      nav.style.width = ((width.left + diff_pos - division.clientWidth)*100/sum)+'%';
      content.style.width = ((width.right - diff_pos)*100/sum)+'%';
      // 结束拖拽后确认布局
      updateColumnLayout();
    }
  }
}

window.addEventListener('mousedown', mousedown)
window.addEventListener('mousemove', mousemove)
window.addEventListener('mouseup', mouseup)

解决方案2：使用CSS容器查询（现代浏览器支持） #

如果目标浏览器支持容器查询（Chrome 105+、Firefox 110+等），可直接用CSS实现基于容器宽度的响应式布局，无需额外JS：

步骤1：给section添加容器查询属性 #

<section id="section" class="h-100 pb-3 ps-3" style="width:70%; container-type: inline-size;">
  <div class="row">
    <div class="dynamic-col">列1</div>
    <div class="dynamic-col">列2</div>
    <div class="dynamic-col">列3</div>
    <div class="dynamic-col">列4</div>
  </div>
</section>

步骤2：编写容器查询CSS #

/* 默认4列布局 */
.dynamic-col {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 15px; /* 对齐Bootstrap列的内边距 */
}

/* 当section宽度小于600px时，切换为2列 */
@container (max-width: 600px) {
  .dynamic-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

这种方式更简洁，完全由CSS处理布局响应，无需JS干预列的类切换。

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