为什么Bulma框架中列的左外边距/内边距无法正常显示

问题原因 #

你没有遵循Bulma的标准页面布局规则，columns组件本身默认仅包含列与列之间的间距，不会自带外侧左右边距，直接放置在<body>标签下就会出现第一列内容紧贴左侧屏幕的问题。

解决方案1（推荐，符合Bulma设计规范） #

将你的columns代码块整体包裹在section和container容器中，container会自动根据视口宽度添加适配的左右边距，section会补充上下内边距让页面布局更协调：

<!-- 原有navbar代码保持不变 -->
<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-2">
        <!-- 原有侧边栏代码保持不变 -->
      </div>
      <div class="column is-10">
        main screen
      </div>
    </div>
  </div>
</section>

解决方案2（轻量修改） #

如果不需要额外的外层容器，直接给columns元素添加Bulma内置的内边距工具类即可，比如添加px-4就能给左右各加1rem的内边距，避免内容贴边：

<div class="columns px-4">
  <!-- 原有列内容保持不变 -->
</div>

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