bootstrap如何設置每一個選項卡對應一個頁面

bootstrap選項卡如果直接在每一個選項div中直接插入頁面，可以使用<object type="text/html" data="test.html">或者<iframe>標簽，但是會出現問題：

 

 

 

 可以看到頁面被限制在某一個特別小的地方，無法正常顯示。

解決辦法：使用jquery手動往每一個tab-pane里添加頁面

$(function () {
   // tabs數據
    var tabsData = [{
        "id": "company_regist_page",
        "url": "company_regist.html"
    },{
        "id": "collegeadmin_regist_page",
        "url": "collegeadmin_regist.html"
    },{
        "id": "collegestudent_regist_page",
        "url": "collegestudent_regist.html"
    },{
        "id": "judge_regist_page",
        "url": "judge_regist.html"
    }];
    // 遍歷json數組，循環添加a標簽click事件
    $(tabsData).each(function () {
        console.log(this.id + "---->" + this.url);
        $("a[href='#" + this.id + "']").bind('click', {
            id: this.id,
            url: this.url
        }, tabsHandler);
    });
});
function tabsHandler(event) {
    var data = event.data;
    showTabs(data.id, data.url);
    return false;   // 阻止默認a標簽相應
}

/***
 * 激活tab選項卡並使用ajax異步加載內容
 * @param {object} tabsId
 * @param {object} url
 */
function showTabs(tabsId, url) {
    $("a[href='#" + tabsId + "']").tab('show');
    var $tabContent = $('#' + tabsId);
    $tabContent.load(url);
}

html代碼：

<div class="nav-tabs-vertical">
    <ul class="nav nav-tabs nav-tabs-line" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#company_regist_page" aria-controls="company_regist_page" aria-selected="true">
                企業機構注冊
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#collegeadmin_regist_page" aria-controls="collegeadmin_regist_page" aria-selected="false">
                高校負責人注冊
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#collegestudent_regist_page" aria-controls="collegestudent_regist_page" aria-selected="false">
                高校學生注冊
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#judge_regist_page" aria-controls="judge_regist_page" aria-selected="false">
                評委注冊
            </a>
        </li>
    </ul>
    <div class="tab-content" id="regist_page">
        <div class="tab-pane active" id="company_regist_page" role="tabpanel">
        </div>
        <div class="tab-pane" id="collegeadmin_regist_page" role="tabpanel">
        </div>
        <div class="tab-pane" id="collegestudent_regist_page" role="tabpanel">
        </div>
        <div class="tab-pane" id="judge_regist_page" role="tabpanel">
        </div>
    </div>
</div>

執行結果：