Inhalt oberhalb der Bootstrap-Navigationsregisterkarten anzeigen?

Question

Ich möchte das Nav-Registerkarten-Markup auf einer Seite implementieren, wie im Bootstrap definiert. Ich möchte jedoch den Inhalt, der beim Klicken auf die einzelnen Registerkarten angezeigt wird, ÜBER die Registerkarten platzieren, im Gegensatz zu den traditionell platzierten Inhalten unter den Registerkarten.

In einfachen Worten, ich möchte die Positionen von "Tabs" und "Tab-Inhalt" wechseln.

Kann mir bitte jemand helfen?

Answer 1

Sie können die Position der Tabs wechseln und das Register-Inhalte durch die Registerkarte-Inhalte über die Registerkarten platzieren:

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Some content in menu 1.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
    <h3>Menu 2</h3> 
    <p>Some content in menu 2.</p> 
    </div> 
</div> 

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
</ul> 

UPDATE die Tabs Kopf zeigen nach unten

Um die Laschen den Kopf zu zeigen, nach unten können Sie hier eine aktualisierte BootplyBootstrap-Standard CSS mit

.nav-tabs { 
    border-bottom: transparent; 
    border-top: 1px solid #dddddd; 
} 
.nav-tabs > li { 
    float: left; 
    margin-bottom: -1px; 
} 
.nav-tabs > li > a { 
    margin-right: 2px; 
    line-height: 1.42857143; 
    border: 1px solid transparent; 
    border-radius: 0 0 4px 4px; 
} 
.nav-tabs > li > a:hover { 
    border-color: #eeeeee #eeeeee #dddddd; 
} 
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus { 
    color: #555555; 
    background-color: #ffffff; 
    border: 1px solid #dddddd; 
    border-top-color: transparent; 
    cursor: default; 
    margin:-1px; 
} 

überschreiben http://www.bootply.com/K8HhVqoz08

Hoffe, das hilft.