Arbeiten mit BootStrap Tabs

Question

Ich arbeite mit Bootstrap-Registerkarten und habe einige Probleme. Beim Laden der Seite ist die erste Registerkarte so aktiv, wie sie sein sollte. Sie wird jedoch an einer anderen Stelle als der Rest des Inhalts geladen, wenn auf die anderen Registerkarten geklickt wird. Wenn Sie auf die Hauptregisterkarte klicken, wird der Inhalt nicht angezeigt.

Content doesn't appear in top left corner

Auch wenn eine andere Registerkarte klicken, wird der Inhalt angezeigt werden in der linken unteren Ecke des Bildschirms.

Like this

Wie kann ich meine Registerkarte Inhalt bekommen immer in der linken oberen Ecke der Registerkarte Bereich anzuzeigen und meine erste Registerkarte Inhalt laden zu immer erhalten, wenn zurück, um es zu klicken?

Hier ist meine Registerkarte Code:

<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

Ihr Code in Ordnung, überprüfen Sie die 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>

Sie arbeitet möglicherweise Bibliotheksdateien fehlen oder kann bestellen der Bibliotheksdateien sind falsch. Überprüfen Sie die Konsole auf Fehler.

In dem Code habe ich die Reihenfolge der erforderlichen Bibliotheksdateien erwähnt.

Eine weitere jsfiddlehttps://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>