Wie bewegen sich zwei zwischen einem Spaltenlayout und einem Tablayout?

Ich versuche ein Layout zu erstellen, das Spalten für größere Größen und Registerkarten in kleineren Größen verwendet. Ich spalte jedoch die Spalten in mehrere Registerkarten.Wie bewegen sich zwei zwischen einem Spaltenlayout und einem Tablayout?

Ich bin in der Nähe, aber meine Probleme ist, dass die tab-pane s in zwei tab-content divs aufgeteilt sind, so dass, wenn Sie auf eine Registerkarte klicken, die in der zweiten Tab-Inhalt div ist, wird das Fenster nicht ausblenden erster Tab-Inhalt div. Klicken Sie auf Kontakte oder Optionen, um zu sehen, was ich meine.

Wie auch immer, um das zu beheben?

Oder wenn es einen anderen bekannten Weg gibt, dies zu erreichen, ist das auch großartig.

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <style> 
 
    .tab-content .panel-heading { 
 
     display: none; 
 
    } 
 
    @media only screen and (min-width: 992px) { 
 
     .tab-content > .tab-pane { 
 
     display: block; 
 
     } 
 
     .tab-content .panel-heading { 
 
     display: block; 
 
     } 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <ul class="nav nav-tabs visible-xs visible-sm"> 
 
     <li class="active"><a data-toggle="tab" href="#info">Info</a></li> 
 
     <li><a data-toggle="tab" href="#docs">Docs</a></li> 
 
     <li><a data-toggle="tab" href="#updates">Updates</a></li> 
 
     <li><a data-toggle="tab" href="#contacts">Contacts</a></li> 
 
     <li><a data-toggle="tab" href="#options">Options</a></li> 
 
    </ul> 
 

 
    <div class="row"> 
 
     <div class="col-md-8 tab-content"> 
 
     <div id="info" role="tabpanel" class="panel panel-default tab-pane active"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Info</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      Info content 
 
      </div> 
 
     </div> 
 

 
     <div id="docs" role="tabpanel" class="panel panel-default tab-pane"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Docs</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      Document Stuff 
 
      </div> 
 
     </div> 
 

 
     <div id="updates" role="tabpanel" class="panel panel-default tab-pane"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Updates</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      Bunch of updates 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4 tab-content"> 
 
     <div id="contacts" role="tabpanel" class="panel panel-default tab-pane"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Contacts</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      Contacts Stuff 
 
      </div> 
 
     </div> 
 

 
     <div id="options" role="tabpanel" class="panel panel-default tab-pane"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Options</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      The options 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-01-06 Eric G

Ich landete etwas Javascript als tab event schreiben, die diese .active Klasse von .tab-pane Divs manuell entfernt. Dies bedeutet auch, dass ich angeben muss, wo meine .tab-content divs sind. Ich habe eine zusätzliche Klasse .tn-cols-to-tabs hinzugefügt, um sie zu identifizieren. Sie können einfach .tab-content angeben, wenn Sie sicher sind, dass auf der Seite keine anderen Tabsets vorhanden sind.

Dies bedeutet, dass die Fades nicht korrekt funktionieren, da sie vom Registerkartenmodul unterstützt werden.

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <style> 
 
     .tab-content .panel-heading{ 
 
     display: none; 
 
     } 
 

 
     @media only screen and (min-width : 992px) { 
 
     .tab-content > .tab-pane { 
 
      display: block; 
 
     } 
 
     .tab-content .panel-heading{ 
 
      display: block; 
 
     } 
 
     } 
 
    </style> 
 
    <script type="text/javascript"> 
 
     $(function(){ 
 
     $('a[data-toggle = "tab"]').on('show.bs.tab', function (e) { 
 
      $('.tn-cols-to-tabs .tab-pane.active').removeClass('active'); 
 
     }) 
 
     }); 
 
    </script> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
    <ul class="nav nav-tabs visible-xs visible-sm"> 
 
     <li class="active"><a data-toggle="tab" href="#info">Info</a></li> 
 
     <li><a data-toggle="tab" href="#docs">Docs</a></li> 
 
     <li><a data-toggle="tab" href="#updates">Updates</a></li> 
 
     <li><a data-toggle="tab" href="#contacts">Contacts</a></li> 
 
     <li><a data-toggle="tab" href="#options">Options</a></li> 
 
    </ul> 
 

 
    <div class="row"> 
 
     <div class="col-md-8 tab-content tn-cols-to-tabs"> 
 
     <div id="info" role="tabpanel" class="panel panel-default tab-pane active"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Info</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      Info content<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf 
 
      </div> 
 
     </div> 
 

 
     <div id="docs" role="tabpanel" class="panel panel-default tab-pane"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Docs</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      Document Stuff 
 
      </div> 
 
     </div> 
 

 
     <div id="updates" role="tabpanel" class="panel panel-default tab-pane"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Updates</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      Bunch of updates 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4 tab-content tn-cols-to-tabs"> 
 
     <div id="contacts" role="tabpanel" class="panel panel-default tab-pane"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Contacts</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      Contacts Stuff<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf<br/> 
 
      adsf 
 
      </div> 
 
     </div> 
 

 
     <div id="options" role="tabpanel" class="panel panel-default tab-pane"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Options</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      The options 
 
      </div> 
 
     </div> 
 
     </div><!-- .col-md-4 --> 
 
    </div><!-- .row --> 
 
    </div><!-- .container --> 
 
    </body> 
 
</html>

Quelle

2017-01-06 23:44:45

alle Platten haben in der gleichen Eltern-div sein. Deshalb hast du dieses Problem. Dies sollte es beheben;)

HTML:

<div class="container"> 
    <ul class="nav nav-tabs visible-xs visible-sm"> 
     <li class="active"><a data-toggle="tab" href="#info">Info</a></li> 
     <li><a data-toggle="tab" href="#docs">Docs</a></li> 
     <li><a data-toggle="tab" href="#updates">Updates</a></li> 
     <li><a data-toggle="tab" href="#contacts">Contacts</a></li> 
     <li><a data-toggle="tab" href="#options">Options</a></li> 
    </ul> 

    <div class="row"> 
     <div class="tab-content"> 
     <div id="info" role="tabpanel" class="panel panel-default tab-pane active colOverrides col-md-8"> 
      <div class="panel-heading"> 
      <h3 class="panel-title">Info</h3> 
      </div> 
      <div class="panel-body"> 
      Info content 
      </div> 
     </div> 

     <div id="contacts" role="tabpanel" class="panel panel-default tab-pane colOverrides col-md-4 "> 
      <div class="panel-heading"> 
      <h3 class="panel-title">Contacts</h3> 
      </div> 
      <div class="panel-body"> 
      Contacts Stuff 
      </div> 
     </div> 

     <div id="docs" role="tabpanel" class="panel panel-default tab-pane colOverrides col-md-8"> 
      <div class="panel-heading"> 
      <h3 class="panel-title">Docs</h3> 
      </div> 
      <div class="panel-body"> 
      Document Stuff 
      </div> 
     </div> 

     <div id="options" role="tabpanel" class="panel panel-default tab-pane colOverrides col-md-4"> 
      <div class="panel-heading"> 
      <h3 class="panel-title">Options</h3> 
      </div> 
      <div class="panel-body"> 
      The options 
      </div> 
     </div> 

     <div id="updates" role="tabpanel" class="panel panel-default tab-pane colOverrides col-md-8"> 
      <div class="panel-heading"> 
      <h3 class="panel-title">Updates</h3> 
      </div> 
      <div class="panel-body"> 
      Bunch of updates 
      </div> 
     </div> 
     </div> 
    </div> 
    </div>

und CSS:

.tab-content .panel-heading { 
    display: none; 
} 
@media only screen and (min-width: 992px) { 
    .tab-content > .tab-pane { 
     display: block; 
    } 
    .tab-content .panel-heading { 
     display: block; 
    } 
} 
@media (max-width: 991px) { 
    .colOverrides.col-md-8 { 
     width: 100% !important; 
    } 
    .colOverrides.col-md-4 { 
     width: 100% !important; 
    } 
} 
.colOverrides { 
    padding: 0px !important; 
    margin: 15px; 
} 
.colOverrides.col-md-8 { 
    width: calc(66.66666667% - 30px); 
} 
.colOverrides.col-md-4 { 
    width: calc(33.33333333% - 30px); 
}

Arbeitslösung: http://www.bootply.com/OzJJ2bX9ef

Quelle

2017-01-06 09:09:18

Leider ist dies bricht das Spaltenlayout, wenn Sie das Hinzufügen von Inhalten zu starten: http://www.bootply.com/Nb8qCoQ4eV –

Wie bewegen sich zwei zwischen einem Spaltenlayout und einem Tablayout?

Antwort

Verwandte Themen