Bootstrap 不会在相同选项卡之间反复来回切换

Question

最近我遇到了这个（ http://bootsnipp.com/snippets/featured/e-mail-interface ）片段，当我开始尝试它时，我注意到在来回切换到标签时有一些奇怪的行为.

基本上我的经验是，当用户切换到具有不同哈希位置的选项卡时，切换按预期工作（#inbox -> #compose -> #trash -> #inbox）。 但是，如果用户在相同的选项卡之间重复切换，即 #inbox -> #compose -> #inbox，它不会执行切换。

有什么特别的东西会导致这种行为吗？

Answer 1

Bootstrap Tab不支持 DOM 的结构。

“撰写”按钮应该是导航栏ul的一部分。

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
        <li style="padding-right:20px;border-right:1px solid #ccc;">
            <p>
            <a type="button" class="btn btn-danger navbar-btn" style="height: 35px; color:#fff;" href="#compose" role="tab" data-toggle="tab"> <span class="glyphicon glyphicon-pencil"></span> Compose</a>
            </p>
        </li>

            <li>
                <a href="#inbox" role="tab" data-toggle="tab">
                    Inbox <span class="label label-success">10</span>
                    .....

与之相反：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <div class="btn-compose pull-left">
            <a type="button" class="btn btn-danger navbar-btn" href="#compose" role="tab" data-toggle="tab"> <span class="glyphicon glyphicon-pencil"></span> Compose</a>
        </div>
        <ul class="nav navbar-nav">
            <li>
                <a href="#inbox" role="tab" data-toggle="tab">
                    Inbox <span class="label label-success">10</span>

这是一个工作小提琴。 它还解决了原始问题，即在小屏幕上单击“撰写”会打开收件箱。