标签内容显示一个在另一个下面

如何解决标签内容显示一个在另一个下面

我有一个 MVC 视图，它将动态创建选项卡。当代理单击按钮时，它将创建一个新选项卡（会话 1），其中将有 2 个更多选项卡（联系和处置），如所附图像所示。问题是当我点击选项卡的配置选项卡内容将显示在联系人选项卡下方。

我的初始标签的静态代码是：

<div class="tab-content-panel">
<div class="panel-heading">
    <ul class="nav nav-tabs" id="mainul">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#session_0">Session0</a>
        </li>
    </ul>
</div>
<div class="panel-body">
    <div class="row">
        <div class="col-md-12">
            <div class="tab-content">
                <div class="tab-pane active" id="session_0">Session0</div>
            </div>
        </div>
    </div>
</div>

`

我正在使用功能添加标签：

function AddSession(tabCounter,sessionId,interactionorigin,phNumber,trAttribute) {
console.log('Add tab ' + tabCounter + ' Session ' + sessionId);
var html = '<li class="nav-item"><a class="nav-link"  data-toggle="tab" href="#session_' + tabCounter + '">session_' + tabCounter + '</a></li>';
$("#mainul").append(html);
var sessionContent = getSessionView(tabCounter,phNumber);
var content = '<div class="tab-pane" id = "session_' + tabCounter + '" >' + sessionContent + '</div >';
$(content).appendTo('.tab-content');
displayTransAtt(trAttribute,tabCounter);
return tabCounter;

}

函数获取会话视图添加 2 个标签联系和处置：

function getSessionView(num_tabs,phNumber) {
console.log('Tab ' + num_tabs);
var str = "Session" + sessionId + "  <button type='button' class='button-save' id='endData" + num_tabs + "' onclick='saveDetails(" + num_tabs + ")'>End Call & Save</button>";   
str = str + "<nav class='container'>";
str = str + "<ul class='nav nav-pills nav-stacked'>";
str = str + " <li class='nav-item'><a class='nav-link active' data-toggle='pill' href='#contactTab" + num_tabs + "'>Contact Attributes</a></li>";
str = str + " <li class='nav-item'><a class='nav-link' data-toggle='pill' href='#dispositionTab" + num_tabs + "'>dispositions</a></li>";
str = str + "</ul></nav>";
str = str + "<div class='tab-content" + num_tabs + "' style='background-color:floralwhite; height: 290px; width: 110 %'>";
str = str + "<div class='container tab-pane fade show active' id='contactTab" + num_tabs + "' style='background-color: floralwhite'>"; 
str = str + "<table class='table' cellspacing='0' cellpadding='0'>";
str = str + "<tr class='bg-light'><td>";
str = str + "<div class='form-group'>";
str = str + " <input type='text' id='movieName" + num_tabs + "' class='form-control input-value' placeholder='Movie Name' />";
str = str + "</div></td></tr>";   
str = str + "</table>";//col
str = str + "</div>";//contact
str = str + "<div id='dispositionTab" + num_tabs + "' class='container tab-pane fade' style='background-color:floralwhite'>";  
str = str + "<table class='table'>";
str = str + "<tr class='bg-light'><td>";   
str = str + "<div class='form-group'>";
str = str + "<select id='dispositio" + num_tabs + "' class='select'>";
str = str + "<option value='disposition'>disposition</option>";
str = str + "</select>";
str = str + "</div></td></tr>";
str = str + "</table>";//col
str = str + "</div>";//disp   
str = str + "</div>";//tab content  
return (str);

}

如何使配置选项卡联系内联到联系选项卡。