bootstrap 4 tabs不显示以前工作过的内容

Question

我在浏览器中显示日志结果。使用此部分代码：

<section>
  <div>
    {% for jobRun in stocObject.jobRuns %}
      <div class="fontSize14 margin20 marginBottom5">
        <span class="bold">Run #{{ jobRun.runNumber }}</span>
        <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-{{ jobRun.jobType }}.log</span>
      </div>
      <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer monospace fullWidth grayContainer padding10 margin20 marginTop0">
        Loading log file...
      </div>
    {% endfor %}
  </div>
</section>

随着一切正确显示。

我现在想要在此页面添加选项卡，并在“运行”选项卡中显示我的日志信息。我将代码更改为：

<section>
  <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 col-xl-12">
    <br />
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a href="#run" class="nav-link active" role="tab" data-toggle="tab">Run</a>
      </li>
      <li class="nav-item">
        <a href="#master" class="nav-link" role="tab" data-toggle="tab">Master</a>
      </li>
      <li class="nav-item">
        <a href="#worker1" class="nav-link" role="tab" data-toggle="tab">Worker 1</a>
      </li>
      <li class="nav-item">
        <a href="#worker2" class="nav-link" role="tab" data-toggle="tab">Worker 2</a>
      </li>
      <li class="nav-item">
        <a href="#worker3" class="nav-link" role="tab" data-toggle="tab">Worker 3</a>
      </li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="run">
        {% for jobRun in stocObject.jobRuns %}
          <div class="fontSize14 margin20 marginBottom5">
            <span class="bold">Run #{{ jobRun.runNumber }}</span>
            <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-{{ jobRun.jobType }}.log</span>
          </div>
          <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer monospace fullWidth grayContainer padding10 margin20 marginTop0">
            Loading log file...
          </div>
        {% endfor %}
      </div>
      <div role="tabpanel" class="tab-pane" id="master">Master</div>
      <div role="tabpanel" class="tab-pane" id="worker1">Worker1</div>
      <div role="tabpanel" class="tab-pane" id="worker2">Worker2</div>
      <div role="tabpanel" class="tab-pane" id="worker3">Worker3</div>
    </div>
  </div>
</section>

新代码现在不再显示我的日志输出。我错过了什么吗？我为此使用了bootstrap4。