Twitter Bootstrap fluid-container Barre latérale

Je suis en utilisant twitter bootstrap pour développer une application. 2 mise en page en colonnes. Une barre latérale et le contenu principal. Suivante est la mise en page.

<div class="container-fluid">
<div class="row-fluid">
<div class="span3 target">
<!--Sidebar content-->
</div>
<div class="span9 ">
        <i class="icon-chevron-left toggles"></i>
<!--Body content-->
</div>
</div>
</div>

En cliquant sur un lien dans le contenu que je veux cacher la barre latérale et le contenu de prendre toute la page. Actuellement, j'ai réussi à le faire de cette façon,

$(document).ready(function(){
$(window).resize(function () { plot(); });

$('.toggles').click(function() {
  $('.target').toggle('fast', function() {
    $('.contents').toggleClass('span12'),
    $('.contents').toggleClass('span9'),
    $('.toggles').toggleClass('icon-chevron-right'),
  });
});
});

Mais je vois une marge sur le côté gauche après avoir caché les span3. Ce besoin d'être enlevé. Également dans cette méthode de masquage, le premier sur la span3 cuirs et span9 changements à span12. C'est en quelque sorte de travail d'amende. Mais sur le deuxième clic span3 montre d'abord, puis seulement le contenu span12 réduit à span9. En raison de ce contenu sauts vers le bas jusqu'à ce qu'il réduise à span9. Je tiens à corriger ce. Sur le deuxième clic, span12 à durée de 9 en premier et ensuite afficher la barre latérale.. quelque chose comme ça.

J'ai vu beaucoup de postes similaires dans les classes "contenu" et "barre latérale" est utilisé au lieu de "spanXX'. Mais sa ne fonctionne pas dans mon cas. Je donno pourquoi.
Aider moi s'il vous plaît..

source d'informationauteur Nithin Emmanuel

  1. 14

    Votre span9 div est de sauter vers le bas en raison de l'animation de la bascule effet jQuery ajoute, il anime à la fois la largeur et la hauteur de votre contenu qui est autour de la div qui est en train d'être basculée est poussé vers le bas que l'animation va. Vous pouvez résoudre ce problème en accélérant le processus d'animation à quelque chose comme 100 millisecondes ou absolument le positionnement de la barre latérale. Et au niveau de la marge problème qui est dû à la bootstrap.css lui-même, sur la ligne 222 nous avons les éléments suivants:

    .row-fluid > [class*="span"]:first-child {
  margin-left: 0;
}

    La first-child pseudo-attributs de l'élément margin:0 pour le premier élément, qui dans ce cas est le volet qui est basculé, donc une fois que la barre latérale est caché le deuxième span tag (le contenu de la div) n'a pas hérité de ce bien et reste avec la valeur par défaut margin appliquée à la span balise, par exemple

    .row-fluid > [class*="span"] {
  float: left;
  margin-left: 2.127659574%;
}

    Vous pouvez surmonter cette marge de problème avec jQuery.

    Ici sont un couple de démos que j'ai fait:

    Mis à jour le violon avec un correctif pour le problème d'un intervenant se trouve que je n'ai pas d'avis, maintenant il fonctionne ok. Ajout d'un .no-sidebar classe qui est ajoutée lors du basculement qui supprime les margin-left créé par le bootstrap, donc maintenant, il fonctionne avec le réactif de la feuille de style très bien.

    http://jsfiddle.net/andresilich/dQ5b7/23/