在引導程序導航選項卡上顯示內容？

Question

我想在引導中定義頁面中實現Nav選項卡標記。但是，我希望放置出現在點擊標籤上方每個標籤時顯示的內容，而不是標籤下方傳統放置的內容。

簡而言之，我想切換「標籤」和「標籤內容」的位置。

有人可以幫忙嗎？

Answer 1

您可以通過將標籤內容在標籤切換標籤和標籤內容的位置：

<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獲取標籤倒掛

要獲得展示標籤倒掛表明您可以覆蓋引導的默認CSS與

.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; 
} 

這裏是一個更新的Bootply
http://www.bootply.com/K8HhVqoz08

希望這會有所幫助。