Bootstrap Modal 中的选项卡未对齐

Question

我正在构建一个 Bootstrap Modal，我想在这个 Modal 中放置一些选项卡，以便能够在他内部导航。

发生的情况是显示的选项卡未按正确方式对齐，如下图所示：

在此输入图片描述

我正在使用以下代码在 Javascript 中构建此模式：

BootstrapDialog.show({
          title: "Vouchers Details",
          closable: false,
          message: `
             <!-- Criação das tabs -->
    <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="#menu1" role="tab" aria-controls="menu1" aria-selected="false">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2" role="tab" aria-controls="menu2" aria-selected="false">Menu 2</a>
      </li>
    </ul>

    <!-- Conteúdo das tabs -->
    <div class="tab-content mt-3">
      <div id="home" class="tab-pane fade show active" role="tabpanel" aria-labelledby="home-tab">
        <h3>HOME</h3>
        <p>Some content.</p>
      </div>
      <div id="menu1" class="tab-pane fade" role="tabpanel" aria-labelledby="menu1-tab">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
      </div>
      <div id="menu2" class="tab-pane fade" role="tabpanel" aria-labelledby="menu2-tab">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
      </div>
    </div>
          `,
          buttons: [
            {
              label: "Dismiss",
              action: function (dialog) {
                dialog.close();
              },
            },
          ],
        });

我需要一些帮助来对齐此选项卡。

我尝试使用一些引导类和一些css和html定制，但它没有解决这个问题。

Answer 1

<!-- Criação das tabs -->
             <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <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 menu1" data-toggle="tab" href="#menu1" role="tab" aria-controls="menu1" aria-selected="false">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2" role="tab" aria-controls="menu2" aria-selected="false">Menu 2</a>
      </li>
    </ul>

    <!-- Conteúdo das tabs -->
    <div class="tab-content mt-3">
      <div id="home" class="tab-pane fade show active" role="tabpanel" aria-labelledby="home-tab">
        <h3>HOME</h3>
        <p>Some content.</p>
      </div>
      <div id="menu1" class="tab-pane fade" role="tabpanel" aria-labelledby="menu1-tab">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
      </div>
      <div id="menu2" class="tab-pane fade" role="tabpanel" aria-labelledby="menu2-tab">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
      </div>
    </div>