多数のタブを持つブートストラップタブ - スタックをボトムアップする方法

Question

デフォルトでは、タブの行が2つ以上ある場合、ブートストラップタブはトップイメージのようにスタックされます。部分的に塗りつぶされた行の代わりに、コンテンツボックスの上に常に置かれているタブの「完全な」行（より自然に見える）を希望します。誰でもこれを達成する方法を知っていますか？行内のタブ順序は同じでなければならないことに注意してください。行の順序が変更されるだけです。おかげさまで、ありがとうございました。それはまだ上に示した同じラッピングの問題を示すが

Answer 1

私は最近、これで遊んでてきたとフレキシボックス（ノートを使用して修正可能性（部分）を思い付いた、BS4はすでに、タブのためのフレキシボックスを利用します）：私はまだに探してい

/* for demo purposes only */ 
 
.demo { 
 
    margin: 2em; 
 
    max-width: 300px; 
 
} 
 

 
.tab-content { 
 
    margin-top: 1em; 
 
} 
 

 
/* tab reordering fix - older browsers may require other prefixed rules */ 
 
.nav.nav-tabs { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap-reverse; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="demo"> 
 

 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="home">[HOME TAB CONTENT]</div> 
 
    <div role="tabpanel" class="tab-pane" id="profile">[PROFILE TAB CONTENT]</div> 
 
    <div role="tabpanel" class="tab-pane" id="messages">[MESSAGES TAB CONTENT]</div> 
 
    <div role="tabpanel" class="tab-pane" id="settings">[SETTINGS TAB CONTENT]</div> 
 
    </div> 
 

 
</div>

残りの1つの問題は、それが選択されている場合は、自動的に一番下の行にタブを移動する方法であります（ここの例では「設定」をクリックしても動作しますが、タブ本体からは外されています）。

私はわずかな回避策を（クリックしたタブのtop位置は、現在アクティブなタブのtop位置より上にある場合は基本的に、wrap代わりのwrap-reverseにflex-wrapを入れ替える）見つけたが、それは地獄のようにフレーク状に感じます！もし私がそれを並べ替えるなら、私はこの投稿を更新することを覚えようとします：