Bootstrap bascule la colonne de gauche dans une ligne à deux colonnes

J’aimerais créer une ligne de deux colonnes pour le contenu de la page du milieu à l’aide de Bootstrap 3.x. J’ai essayé les canavas mais cela n’a pas fonctionné comme prévu pour mon cas en raison de la question non répondue ici .

Voici mon JS Fiddle

Je veux que la colonne de gauche soit affichée normale sur md et au-dessus, puis masque et affiche un bouton bascule sur les périphériques xs et sm et la bascule des colonnes doit appliquer une animation en largeur pour montrer une belle poussée des colonnes.

HTML

  Left Col
  Right Col Reflow Me

CSS

 .row-fluid div { height: 200px; -webkit-transition: width 0.3s ease, margin 0.3s ease; -moz-transition: width 0.3s ease, margin 0.3s ease; -o-transition: width 0.3s ease, margin 0.3s ease; transition: width 0.3s ease, margin 0.3s ease; } .row-fluid .col-0 { width: 0%; } #col1 { background-color: #A6BFBA; } #col2 { background-color: #DE4124; } #sortingg { margin: 50px; } .row-fluid .col-0 + [class*="span"]{ margin-left: 0; }

 $('#sortingg').on('click', function () { $('#col1').toggleClass('col-0 col-xs-3'); $('#col2').toggleClass('col-xs-12 col-xs-9'); });

On dirait quelques problèmes ici. Tout d’abord, vous utilisez du code hérité. Quelque chose avec “span” est vieux code Bootstrap 2. Deuxièmement, vous devez également effectuer une transition de remplissage. Si le rembourrage n’est pas en transition, il saute un peu moche comme. Enfin, vous devez également faire flotter votre col-0 comme une colonne normale.

CSS et démo mis à jour ci-dessous:

 .row-fluid div { height: 200px; -webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; -moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; -o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; } .row-fluid .col-0 { width: 0%; float:left; } ... .row-fluid .col-0 + [class*="col"]{ margin-left: 0; }

http://fiddle.jshell.net/fv2jvbgL/