Jquery 引导3无法取消非活动选项的对正下拉按钮组的标记

在Bootstrap3.3.7中，我尝试在选择后创建一个合理的导航下拉按钮组，以便正确标记。我有两个菜单选项被标记的问题，在下拉按钮，当一个接一个的选项被选中。有没有办法让下拉菜单只标记所选的选项，同时作为一个对正的组下拉导航按钮？谢谢大家!

请在下拉列表中选择一个选项
请试试右边的下拉菜单
请尝试选择drop 2，然后在下拉列表下标记这两个选项
请尝试选择drop 1，然后在下拉列表下标记这两个选项

---

我建议使用Nav组件，而不是使用pills修饰符类，而不是使用按钮组。这是不一样的，但非常接近和标签面板是建立工作与药丸造型

它将解决您现在在下拉选项中保留活动类的问题

<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>

家
轮廓
信息
设置

---

我建议使用Nav组件，而不是使用pills修饰符类，而不是使用按钮组。这是不一样的，但非常接近和标签面板是建立工作与药丸造型

它将解决您现在在下拉选项中保留活动类的问题

<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>

家
轮廓
信息
设置

---

我根据自己的需要定制了@partypete25答案。再次感谢@partypete25

.nav.nav-pills.nav-justified.nav-group>li:not（：第一个孩子）：not（：最后一个孩子）>.btn{
边界半径：0；
页边距底部：0；
}
@介质（最大宽度：768px）{
.nav.nav-pills.nav-justified.nav-group>li:第一个孩子：不是（：最后一个孩子）>.btn{
边框左下半径：0；
边框右下半径：0；
页边距底部：0；
}
.nav.nav-pills.nav-justified.nav-group>li:最后一个孩子：不是（：第一个孩子）>.btn{
边框左上半径：0；
边框右上角半径：0；
}
.nav.nav-pills.nav-justized.nav-group li+li{
左边距：0；
}
}
@介质（最小宽度：768px）{
.nav.nav-pills.nav-justified.nav-group>li:第一个孩子：不是（：最后一个孩子）>.btn{
边框右上角半径：0；
边框右下半径：0；
}
.nav.nav-pills.nav-justified.nav-group>li:最后一个孩子：不是（：第一个孩子）>.btn{
边框左上半径：0；
边框左下半径：0；
}
}










请在下拉列表中选择一个选项
请试试右边的下拉菜单
请尝试选择drop 2，然后在下拉列表下标记这两个选项
请尝试选择drop 1，然后在下拉列表下标记这两个选项

我根据自己的需要定制了@partypete25答案。再次感谢@partypete25

.nav.nav-pills.nav-justified.nav-group>li:not（：第一个孩子）：not（：最后一个孩子）>.btn{
边界半径：0；
页边距底部：0；
}
@介质（最大宽度：768px）{
.nav.nav-pills.nav-justified.nav-group>li:第一个孩子：不是（：最后一个孩子）>.btn{
边框左下半径：0；
边框右下半径：0；
页边距底部：0；
}
.nav.nav-pills.nav-justified.nav-group>li:最后一个孩子：不是（：第一个孩子）>.btn{
边框左上半径：0；
边框右上角半径：0；
}
.nav.nav-pills.nav-justized.nav-group li+li{
左边距：0；
}
}
@介质（最小宽度：768px）{
.nav.nav-pills.nav-justified.nav-group>li:第一个孩子：不是（：最后一个孩子）>.btn{
边框右上角半径：0；
边框右下半径：0；
}
.nav.nav-pills.nav-justified.nav-group>li:最后一个孩子：不是（：第一个孩子）>.btn{
边框左上半径：0；
边框左下半径：0；
}
}










请在下拉列表中选择一个选项
请试试右边的下拉菜单
请尝试选择drop 2，然后在下拉列表下标记这两个选项
请尝试选择drop 1，然后在下拉列表下标记这两个选项

我计算出了那部分，但问题是t

<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>