ブートストラップナビゲーションタブの上にコンテンツを表示していますか？

Question

ブートストラップで定義されているように、ページにナビタブマークアップを実装したいと思います。しかし、タブの下に伝統的に配置されたコンテンツとは対照的に、各タブをクリックすると表示されるコンテンツを配置する必要があります。

簡単に言えば、「タブ」と「タブのコンテンツ」の位置を切り替える必要があります。

誰かが助けてくれますか？

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タブが逆さま

を取得するには、showするには、Getタブはあなたがここに

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

とブートストラップのデフォルトのCSSを上書きすることができます逆さまに示すように更新Bootplyです http://www.bootply.com/K8HhVqoz08

希望します。