Bootstrap模态框内标签页对齐异常问题求助

我正在做一个Bootstrap模态框，想在里面加几个标签页来切换内容，但遇到了个头疼的问题——标签页的显示对齐完全不对，不是Bootstrap标签页本该有的横向整齐排列的样子。

我是通过JavaScript来构建这个模态框的，核心代码如下：

BootstrapDialog.show({
  title: "Vouchers Details",
  closable: false,
  message: `
    <!-- 标签页导航 -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </li>
      <!-- 其他标签项结构类似 -->
    </ul>
    <!-- 标签页内容容器 -->
    <div class="tab-content">
      <div class="tab-pane active" id="home" role="tabpanel">Home标签页内容</div>
      <div class="tab-pane" id="profile" role="tabpanel">Profile标签页内容</div>
    </div>
  `
});

我已经确认Bootstrap的CSS和JS文件都正确引入了，模态框本身能正常弹出，但里面的标签页就是排版错乱，有没有朋友能帮我排查下问题出在哪呀？

备注：内容来源于stack exchange，提问作者Luís Briga