使用Bulma CSS构建双栏布局时右侧列溢出页面问题求助

我之前也踩过这个坑！Bulma的Columns组件本身是响应式的，但有时候因为细节没处理好，就会出现内容溢出页面的情况。咱们来一步步排查解决：

常见问题原因&解决方案 #

1. 给Columns容器添加响应式基础类 #

Bulma的columns默认在小屏幕不会自动堆叠，而且如果没加is-mobile类，列的宽度计算可能会有偏差，导致内容溢出。一定要给外层容器加上：

<div class="columns is-mobile">
  <!-- 你的左右列 -->
</div>

2. 让右侧列具备自适应能力 #

右侧宽栏需要设置为flex容器，确保内部内容能自适应容器宽度，而不是撑破它：

<div class="column is-flex is-flex-direction-column">
  <!-- 主内容 -->
</div>

• is-flex：把列变成flex容器，内容会自动填充可用空间
• is-flex-direction-column：保持内容垂直排列，符合常规布局逻辑

3. 处理内部超宽元素 #

如果右侧内容里有图片、表格或者固定宽度的容器，一定要让它们自适应：

• 图片添加Bulma的is-responsive类：

  <img src="你的图片地址" class="is-responsive" alt="描述">
  

• 长文本/表格用content容器包裹，并设置溢出处理：

  <div class="content" style="max-width: 100%; overflow-x: auto;">
    <!-- 长文本、表格等内容 -->
  </div>
  

  overflow-x: auto会在内容超宽时显示横向滚动条，而不是溢出页面。

完整修正后的最小示例 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
  <div class="columns is-mobile">
    <!-- 左侧窄栏导航 -->
    <div class="column is-2">
      <aside class="menu">
        <p class="menu-label">导航菜单</p>
        <ul class="menu-list">
          <li><a href="#">首页</a></li>
          <li><a href="#">文章列表</a></li>
          <li><a href="#">个人设置</a></li>
        </ul>
      </aside>
    </div>
    <!-- 右侧主内容栏 -->
    <div class="column is-flex is-flex-direction-column">
      <div class="content" style="max-width: 100%; overflow-x: auto;">
        <h1>网站主内容</h1>
        <p>这里可以放置任意长度的文本内容，即使是非常长的段落也不会溢出页面...</p>
        <!-- 响应式图片 -->
        <img src="https://picsum.photos/1200/600" class="is-responsive" alt="示例图片">
        <!-- 宽表格也能正常显示 -->
        <table class="table is-fullwidth">
          <thead>
            <tr>
              <th>表头1</th>
              <th>表头2</th>
              <th>表头3</th>
              <th>表头4</th>
              <th>表头5</th>
              <th>表头6</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>内容单元格1</td>
              <td>内容单元格2</td>
              <td>内容单元格3</td>
              <td>内容单元格4</td>
              <td>内容单元格5</td>
              <td>内容单元格6</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

额外提示 #

如果你的内容里有自定义的固定宽度元素（比如width: 1200px的div），一定要把它改成max-width: 100%，或者用overflow-x: auto的容器包裹它，这样就能避免溢出问题啦！

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