ブートストラップ3は、非アクティブなオプションの整列したドロップダウンボタングループのマークを外すことができません。

Question

ブートストラップ3.3.7では、選択後、正しくマークするためのナビゲーションドロップダウンボタングループが必要です。私は両方のメニューオプションがドロップダウンボタンにマークされているという問題を抱えています。選択されたオプションのみをマークするドロップダウンメニューを持っていて、正当なグループドロップダウンナビゲーションボタンがあるのですか？ありがとうございました！

sample code

<div class="row"> 
<div class="col-md-7"> 
    <div class="btn-group btn-group-justified" role="group"> 
     <a href="#left" class="btn btn-primary" role="button" data-toggle="tab">Left</a> 
     <a href="#middle" class="btn btn-primary" role="button" data-toggle="tab">Middle</a> 
     <div class="btn-group" role="group"> 
      <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button"> Dropdown <span class="caret"></span> </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#drop1" role="tab" data-toggle="tab">drop 1</a></li> 
       <li><a href="#drop2" role="tab" data-toggle="tab">drop 2</a></li> 
      </ul> 
     </div> 
    </div> 

    <div class="tab-content"> 
     <div class="tab-pane active" role="tabpanel" id="left">please select 1 of the options in the dropdown</div> 
     <div class="tab-pane" role="tabpanel" id="middle">please try the dropdown on the right</div> 
     <div class="tab-pane" role="tabpanel" id="drop1">please try select drop 2 also, then both are marked under the dropdown</div> 
     <div class="tab-pane" role="tabpanel" id="drop2">please try select drop 1 also, then both are marked under the dropdown</div> 
    </div> 
</div> 

Answer 1

の代わりに私が代わりに錠剤修飾クラスとスタイルのナビゲーション・コンポーネントを使用することをお勧めしたいボタンのグループを使用して。それは同じではなく、非常に近く、タブのパネルは、丸薬のスタイリングで動作するように作られています。

アクティブなクラスがドロップダウンオプションに残っている問題を解決します。

<div> 
    <ul class="nav nav-pills nav-justified" role="tablist"> 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="pill">Home</a></li> 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="pill">Profile</a></li> 
    <li role="presentation" class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
     Dropdown <span class="caret"></span> 
    </a> 
     <ul class="dropdown-menu"> 
     <li><a href="#messages" aria-controls="messages" role="tab" data-toggle="pill">Messages</a></li> 
     <li><a href="#settings" aria-controls="settings" role="tab" data-toggle="pill">Settings</a></li> 
     </ul> 
    </li> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="home">home</div> 
    <div role="tabpanel" class="tab-pane" id="profile">profile</div> 
    <div role="tabpanel" class="tab-pane" id="messages">messages</div> 
    <div role="tabpanel" class="tab-pane" id="settings">settings</div> 
    </div> 
</div> 

https://codepen.io/partypete25/pen/Moooaq?editors=1100

Answer 2

私は自分のニーズに、partypete25答え@仕立て。再びありがとう@ partypete25！

sample code

<style> 
    .nav.nav-pills.nav-justified.nav-group > li:not(:first-child):not(:last-child) > .btn { 
     border-radius: 0; 
     margin-bottom: 0; 
    } 

    @media(max-width:768px){ 
     .nav.nav-pills.nav-justified.nav-group > li:first-child:not(:last-child) > .btn { 
      border-bottom-left-radius: 0; 
      border-bottom-right-radius: 0; 
      margin-bottom: 0; 

     } 
     .nav.nav-pills.nav-justified.nav-group > li:last-child:not(:first-child) > .btn { 
      border-top-left-radius: 0; 
      border-top-right-radius: 0; 
     } 
     .nav.nav-pills.nav-justified.nav-group li + li { 
      margin-left: 0; 
     } 
    } 
    @media(min-width:768px){ 
     .nav.nav-pills.nav-justified.nav-group > li:first-child:not(:last-child) > .btn { 
      border-top-right-radius: 0; 
      border-bottom-right-radius: 0; 
     } 
     .nav.nav-pills.nav-justified.nav-group > li:last-child:not(:first-child) > .btn { 
      border-top-left-radius: 0; 
      border-bottom-left-radius: 0; 
     } 
    } 
</style> 

<div class="row"> 
    <div class="col-md-12"> 
     <ul class="nav nav-pills nav-justified nav-group"> 
      <li class="active"><a href="#left" class="btn btn-primary" role="tab" data-toggle="tab">Left</a></li> 
      <li><a href="#middle" class="btn btn-primary" role="tab" data-toggle="tab">Middle</a></li> 
      <li class="dropdown"> 
       <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button"> Dropdown <span class="caret"></span> </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#drop1" role="tab" data-toggle="tab">drop 1</a></li> 
        <li><a href="#drop2" role="tab" data-toggle="tab">drop 2</a></li> 
       </ul> 
      </li> 
     </ul> 

     <div class="tab-content"> 
      <div class="tab-pane active" role="tabpanel" id="left">please select 1 of the options in the dropdown</div> 
      <div class="tab-pane" role="tabpanel" id="middle">please try the dropdown on the right</div> 
      <div class="tab-pane" role="tabpanel" id="drop1">please try select drop 2 also, then both are marked under the dropdown</div> 
      <div class="tab-pane" role="tabpanel" id="drop2">please try select drop 1 also, then both are marked under the dropdown</div> 
     </div> 
    </div> 
</div>