Bootstrap 5 如何实现模态框内按钮的图标与文字对齐

完全可以仅使用Bootstrap 5自带的工具类实现图标与文字的对齐需求，不需要额外编写自定义CSS。

实现逻辑 #

只需要给动态生成的按钮添加3个Bootstrap原生工具类即可：

• d-flex：将按钮转为弹性布局容器
• align-items-center：让容器内的图标、文字在垂直方向居中对齐
• gap-2：给图标和文字之间增加合理的水平间距，避免二者紧贴

修改后的代码示例 #

普通按钮创建逻辑

testItems.forEach(function ( item ) {
    let btn = document.createElement("a");
    btn.setAttribute("role", "button");
    btn.innerHTML = `<i class="fas fa-plus-circle"></i> ${item}`;
    // 新增对齐相关的Bootstrap工具类
    ["btn", "btn-primary", "d-flex", "align-items-center", "gap-2"].forEach(item => btn.classList.add(item)); 
    btnsDiv.appendChild(btn)
});

删除按钮创建逻辑

你之前嵌套<p>标签的写法没有必要，直接按如下写法调整即可：

let delBtn = document.createElement("a");
delBtn.setAttribute("role", "button");
["btn", "btn-danger", "d-flex", "align-items-center", "gap-2", "text-start"].forEach(item => delBtn.classList.add(item)); 
delBtn.innerHTML = `<i class="fas fa-minus-circle"></i> 删除`
btnsDiv.appendChild(delBtn)

如果需要调整图标和文字的间距，只需要修改gap-*后面的数值即可，可选值从1到5对应不同的间距尺寸。

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