如何实现Bulma框架中列折叠：左侧列设为is-0其余列填充

首先先修正你提供的代码问题：id和class不能混写在一起，正确的结构应该把id单独设置，列的宽度类放在class里，否则Bulma的样式不会生效。

实现步骤 #

1. 调整HTML结构

添加一个触发折叠的按钮，同时拆分id和class：

<!-- 折叠触发按钮 -->
<button class="button is-primary" id="toggleSidebar">切换侧边栏</button>

<!-- 列容器 -->
<div class="columns is-gapless">
  <div class="column is-2" id="sidebar">
    <!-- 侧边栏内容 -->
    <p>侧边栏内容</p>
  </div>
  <div class="column is-8" id="centre">
    <!-- 中间内容 -->
    <p>主内容区域</p>
  </div>
  <div class="column is-2" id="right">
    <!-- 右侧栏内容 -->
    <p>右侧栏内容</p>
  </div>
</div>

2. 编写JavaScript控制类切换

通过切换列的宽度类，实现折叠/展开效果：

const toggleBtn = document.getElementById('toggleSidebar');
const sidebar = document.getElementById('sidebar');
const centreColumn = document.getElementById('centre');

toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('is-0');
  sidebar.classList.toggle('is-2');
  
  // 同步调整中间列宽度，保持总列数为12
  centreColumn.classList.toggle('is-8');
  centreColumn.classList.toggle('is-10');
});

3. 可选：添加平滑过渡动画

如果需要折叠/展开时有平滑的动画效果，添加自定义CSS：

.column {
  transition: flex-basis 0.3s ease-in-out;
}

效果说明 #

• 点击按钮时，左侧侧边栏会在is-2（占2份宽度）和is-0（完全隐藏）之间切换
• 中间列会同步切换is-8和is-10，自动填充侧边栏收起后空出的空间
• 右侧栏始终保持is-2的宽度，整体布局严格遵循Bulma的12列网格规则

内容的提问来源于stack exchange，提问作者Charlie Benger-Stevenson