Bootstrap 3 无法取消标记非活动选项的对齐下拉按钮组

Question

使用 Bootstrap 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

我建议不要使用按钮组，而是使用带有 pills 修饰符类的 Nav 组件。它不一样，但非常接近，并且 Tab 面板是为与药丸样式一起使用而构建的。

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

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