tabblable inside tabbable twitter bootstrap

问题

im making my admin panel... with many forms that i want to clasify by category so im trying to do something like this

div.tabbable
    ul#first-tab.nav.nav-tabs
        li.active
            a(href='#datos-de-usuario',data-toggle='tab') Datos de usuarios
        li
            a(href='#datos-de-comercio',data-toggle='tab') Datos de comercio
    div.tab-content
        div#datos-de-usuario.tab-pane.active
            div.tabbable.tabs-left
                ul#second-tab.nav.nav-tabs
                    li.active
                        a(href="#formulario-nuevo-usuario") Nuevo usuario
                    li
                        a(href="#formulario-borrar-usuario") Borrar usuario
                div.tab-content
                    div#formulario-nuevo-usuario.tab-pane.active
                        h2 tab Nuevo usuario

                    div#formulario-borrar-usuario.tab-pane
                        h2 tab Borrar usuario

        div#datos-de-comercio.tab-pane
            h2 some other content in comercio

the first tab button (#first-tab) works fine but the second (#second-tab) dont work i click and never changes nothing happends.

回答1:

Can you post the HTML that the jade template is creating?

Tabs inside tab content should work fine...

  <div class="tabbable">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
      <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab1">
        <p>I'm in Section 1.</p>
      </div>
      <div class="tab-pane" id="tab2">
        <p>I'm in Section 2.</p>
        <div class="span8">
        <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
          <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab3">
            <p>I'm in Section 3.</p>
          </div>
          <div class="tab-pane" id="tab3">
            <p>I'm in Section 4.</p>
          </div>
        </div>
        </div>
      </div>      
      </div>
    </div>
  </div>

Demo

Update 2018 Nested tabs aren't supported in Bootstrap 4

来源：https://stackoverflow.com/questions/16466092/tabblable-inside-tabbable-twitter-bootstrap