Bootstrap Registerkarte automatisch Höhe Register entsprechend dem Inhalt

Question

Ich habe Bootstrap Registerkarten wie folgt vor:

<ul class="nav nav-tabs"> 
    <li><a data-toggle="tab" href="#home">Tab home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Tab menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Tab menu 2</a> </li> 
    <div class="input-group" style="margin-bottom: 0 !important;margin-top: 5px;padding-left:50px;"> 
     <input type="text" class="form-control txtSearch" placeholder="Search for..."> 
     <span class="input-group-btn"> 
      <button class="btn btn-default btnSearchAgain" type="button" style="border: 1px #cfcfcf solid !important;padding: 6px !important;">Search</button> 
     </span> 
    </div> 
</ul> 

Und die Tabs sich wie folgt aussehen:

<div id="home" class="tab-pane fade in"> </div> 
<div id="menu1" class="tab-pane fade "> </div> 
<div id="menu1" class="tab-pane fade "> </div> 

Wie Sie keine der Registerkarten können habe anfänglich aktive Klasse ... Und eine von ihnen muss eine aktive Klasse für mich haben, um sie zu zeigen.

Wenn ich eine aktive Klasse zu Home-Registerkarte hinzufügen, sagen wir ... Wenn ich dann auf andere Registerkarten klicke, schrumpft ihre Höhe nicht oder verteilt sich entsprechend dem Inhalt der Registerkarte. Statt beiden andere 2 Tabs haben die Höhe der ersten Registerkarte (die sehr groß ist), wenn ich es wie folgt tun:

<div id="home" class="tab-pane fade in active"> </div> 
<div id="menu1" class="tab-pane fade "> </div> 
<div id="menu1" class="tab-pane fade "> </div> 

Bitte beachte, dass ich die aktive Klasse auf den ersten Registerkarte hinzugefügt ...

Mein Frage ist, wie kann ich alle Tabs so anpassen, dass sie automatisch an den Inhalt angepasst werden, mit dem sie gefüllt sind, wenn sie angeklickt werden?

Wenn ich ihnen keine aktive Klasse hinzufüge, funktioniert die Größenanpassung Option, aber wenn ich entweder durch HTML oder jQuery aktive Klasse zu ihnen hinzufügen, dann bin ich in Schwierigkeiten und die Größenänderung Option funktioniert nicht.

ich habe in jQuery dies auch versucht.

$('.nav-tabs a[href="#home"]').tab('show'); 

ersten Reiter nach Hause zeigt sich, wenn Seite geladen wird, aber dann wieder begegne ich das gleiche Problem, auf 2 anderen Registerkarten klicken, halten sie die gleiche Höhe wie die erste Registerkarte und horizontale Scroll ist eine Meile lang ...

W Hut kann ich tun, um das zu beheben ??

Answer 1

Scheint, wie Sie den Container für die Registerkarten Inhalt Platte erforderlich fehlen:

<div class="tab-content"> 

Verpackung den Inhalt Ihrer Registerkarten mit, dass behebt das Problem, Ihr Markup wie sein muss:

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    ... 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
    ... 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
    ... 
    </div> 
</div> 

Bootply Demo