使用 BootStrap 选项卡

Question

我正在使用引导选项卡，但遇到了一些问题。加载页面时，第一个选项卡应处于活动状态，但是当单击其他选项卡时，它加载的位置与其余内容不同，当单击返回主选项卡时，内容不会出现。

Content doesn't appear in top left corner

此外，当单击另一个选项卡时，内容会显示在屏幕的左下角。

Like this

如何让我的标签内容始终显示在标签窗格的左上角，并让我的第一个标签内容在点击返回时始终加载？

这是我的标签代码：

<form [formGroup]="form">
<div class="form-component-container">
    <div class="panel panel-default form component main">
        <div class="panel-heading">
            <ul id="rowTab" class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
                <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
                <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
                <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
                <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
                <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
            </ul>
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade active in">
                    <p>Tab 1 inner</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Tab 2 inner</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <p>Tab 3 inner</p>
                </div>
                <div id="tab4" class="tab-pane fade">
                    <p>Tab 4 inner</p>
                </div>
                <div id="tab5" class="tab-pane fade">
                    <p>Tab 5 inner</p>
                </div>
                <div id="tab6" class="tab-pane fade">
                    <p>Tab 6 inner</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您的代码运行良好，请检查 jsfiddle https://jsfiddle.net/bsuqoryd/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form [formGroup]="form">
<div class="form-component-container">
    <div class="panel panel-default form component main">
        <div class="panel-heading">
            <ul id="rowTab" class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
                <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
                <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
                <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
                <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
                <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
            </ul>
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade active in">
                    <p>Tab 1 inner</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Tab 2 inner</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <p>Tab 3 inner</p>
                </div>
                <div id="tab4" class="tab-pane fade">
                    <p>Tab 4 inner</p>
                </div>
                <div id="tab5" class="tab-pane fade">
                    <p>Tab 5 inner</p>
                </div>
                <div id="tab6" class="tab-pane fade">
                    <p>Tab 6 inner</p>
                </div>
            </div>
        </div>
    </div>
</div>

您可能缺少库文件或库文件的顺序错误。检查控制台是否有错误。

在代码中我已经提到了所需库文件的顺序。

再来一个 jsfiddle https://jsfiddle.net/bsuqoryd/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form [formGroup]="form">
<div class="form-component-container">
    <div class="panel panel-default form component main">
        <div class="panel-heading">
            
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade active in">
                    <p>Tab 1 inner</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Tab 2 inner</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <p>Tab 3 inner</p>
                </div>
                <div id="tab4" class="tab-pane fade">
                    <p>Tab 4 inner</p>
                </div>
                <div id="tab5" class="tab-pane fade">
                    <p>Tab 5 inner</p>
                </div>
                <div id="tab6" class="tab-pane fade">
                    <p>Tab 6 inner</p>
                </div>
            </div>
            <ul id="rowTab" class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
                <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
                <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
                <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
                <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
                <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
            </ul>
        </div>
    </div>
</div>