css表单控件间距不统一如何调整_使用Bulma内置spacing类控制

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css表单控件间距不统一如何调整_使用Bulma内置spacing类控制

2025-12-03

浏览次数：次

返回列表

使用Bulma的spacing工具类可统一表单控件间距，推荐在field容器或输入元素上添加一致的mb类（如mb-3或mb-5），结合field和control结构优化布局，并通过mb-0清除默认样式干扰，确保整体一致性。

css表单控件间距不统一如何调整_使用bulma内置spacing类控制

表单控件间距不统一是前端开发中常见问题，尤其在使用原生表单元素时，不同控件如 input、select、textarea 默认样式存在差异。Bulma 提供了一套基于 Flexbox 的响应式布局系统和丰富的 spacing 工具类，可以快速统一表单控件之间的间距。

使用 Bulma 的 spacing 工具类

Bulma 提供了 margin 和 padding 的辅助类，命名规则为：mb-{size}（下边距）、mt-{size}（上边距）等，其中 size 范围从 0 到 6，对应不同的间距层级。

要统一表单控件的垂直间距，推荐给每个控件添加一致的下边距：

mb-3：添加中等下边距（默认约 0.75rem）
mb-4：稍大一些的间距，适合大多数表单布局
设置 mb-0 可清除默认间距，便于重新控制

示例代码：

<div class="field">
  <label class="label">姓名</label>
  <div class="control">
    <input class="input mb-3" type="text" placeholder="请输入姓名">
  </div>
</div>

<div class="field">
  <label class="label">邮箱</label>
  <div class="control">
    <input class="input mb-3" type="email" placeholder="请输入邮箱">
  </div>
</div>

<div class="field">
  <label class="label">备注</label>
  <div class="control">
    <textarea class="textarea mb-3" placeholder="请输入备注"></textarea>
  </div>
</div>

结合 field 和 control 容器优化布局

Bulma 的 field 类本身支持响应式堆叠布局，配合 mb- 类能更精细控制整体结构。

Remover

几秒钟去除图中不需要的元素

304 查看详情 Remover

若希望整个 field 之间保持统一间距，可直接在 field 容器上应用 margin 类：

<div class="field mb-5">
  <label class="label">选择城市</label>
  <div class="control">
    <div class="select">
      <select>
        <option>北京</option>
        <option>上海</option>
      </select>
    </div>
  </div>
</div>

这样所有 field 块级元素之间的间距就完全一致，无需单独处理每个输入框。