如何为.pug文件生成的HTML元素添加间距以解决Bootstrap边距问题？

问题原因 #

这不是Bootstrap的Bug，是Pug的默认压缩行为导致的：Pug会自动移除生成HTML中元素间的空白字符。而Bootstrap的.btn默认是inline-block类型，这类元素的间距依赖HTML中的空白字符渲染——原HTML保留了按钮间的换行和空格，所以有间距；Pug生成的HTML把按钮直接拼接，没有空白，因此间距消失。

解决方法 #

按推荐程度排序提供三种方案：

方案1：改用Bootstrap Flex布局（最推荐）

给容器添加d-flex gap-2类（Bootstrap 5及以上版本支持），用Flex布局的gap属性控制间距，彻底摆脱对HTML空白的依赖：

.my-3.text-center.d-flex.gap-2(role="group")
    button.btn.btn-primary#saveBtn(type="button" disabled) Save
    button.btn.btn-danger#undoChangesBtn(type="button" disabled) Undo Changes
    button.btn.btn-secondary#viewSignPage(type="button") View Sign Page
    button.btn.btn-secondary#viewDataPage(type="button") View Data Page

无论Pug是否压缩HTML，按钮都会有稳定的间距。

方案2：在Pug中手动添加空白字符

如果要保留原布局逻辑，可在按钮之间用管道符|输出空格：

.my-3.text-center(role="group")
    button.btn.btn-primary#saveBtn(type="button" disabled) Save
    | 
    button.btn.btn-danger#undoChangesBtn(type="button" disabled) Undo Changes
    | 
    button.btn.btn-secondary#viewSignPage(type="button") View Sign Page
    | 
    button.btn.btn-secondary#viewDataPage(type="button") View Data Page

注意管道符后面要加空格，确保生成的HTML中按钮间有空白。

方案3：用Pug插值语法强制输出空格

在按钮元素末尾用!= ' '强制插入空格：

.my-3.text-center(role="group")
    button.btn.btn-primary#saveBtn(type="button" disabled) Save!= ' '
    button.btn.btn-danger#undoChangesBtn(type="button" disabled) Undo Changes!= ' '
    button.btn.btn-secondary#viewSignPage(type="button") View Sign Page!= ' '
    button.btn.btn-secondary#viewDataPage(type="button") View Data Page

代码对比 #

• 原HTML（正常间距）：

<div class="my-3 text-center" role="group">
    <button class="btn btn-primary" id="saveBtn" type="button" disabled="">Save</button>
    <button class="btn btn-danger" id="undoChangesBtn" type="button" disabled="">Undo Changes</button>
    <button class="btn btn-secondary" id="viewSignPage" type="button">View Sign Page</button>
    <button class="btn btn-secondary" id="viewDataPage" type="button">View Data Page</button>
</div>

• 问题Pug生成的HTML（无间距）：

<div class="my-3 text-center" role="group"><button class="btn btn-primary" id="saveBtn" type="button" disabled="">Save</button><button class="btn btn-danger" id="undoChangesBtn" type="button" disabled="">Undo Changes</button><button class="btn btn-secondary" id="viewSignPage" type="button">View Sign Page </button><button class="btn btn-secondary" id="viewDataPage" type="button">View Data Page</button></div>

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