À l’aide de Bootstrap & jQuery, comment faire en sorte que la classe de conteneur passe à une taille inférieure uniquement lorsque la barre latérale est BOTH activée et se chevauche?

J’ai une mise en page avec une barre latérale cachée qui apparaît sur le côté droit en utilisant .toggleClass de jQuery pour activer / désactiver la barre latérale. Lorsque la classe est activée (visible), la barre latérale apparaît à droite et la règle .css padding-right: 250px; est appliqué à la #wrapper qui a une classe de conteneur Bootstrap.

La classe conteneur est intégrée au fichier Bootstrap.css, ce qui rend la page sensible, de sorte qu’elle se redimensionne en fonction de la largeur de la fenêtre du navigateur. La façon dont il est actuellement défini est que, lorsque la barre latérale s’ouvre, elle peut ou non chevaucher le conteneur, en fonction de la largeur de la fenêtre du navigateur. / off , mais cela ne prend pas en compte le fait qu’il n’est parfois pas nécessaire de l’append. Ce n’est que lorsqu’il y a un chevauchement que la fenêtre n’est pas assez large qu’il faut l’append.

css:

#wrapper.toggled { padding-right: 250px; } #wrapper.toggled #sidebar-wrapper { width: 250px; z-index: 50; }

scénario:

 $("#menu-icon-sortinggger").click(function(e) {e.preventDefault(); $(".container").toggleClass("container-resize");}); $("#menu-icon-sortinggger").click(function(e) {e.preventDefault(); $("#wrapper").toggleClass("toggled");});

Lorsque la fenêtre du navigateur est suffisamment large pour que la barre latérale puisse être visible sans chevaucher le conteneur, il n’est pas nécessaire de réduire davantage le conteneur. Ce que je veux faire, c’est faire en sorte que le conteneur réduise la largeur uniquement lorsqu’il est recouvert par la barre latérale, et pas seulement parce que la barre latérale est visible.

Il me semble que cela fonctionnerait très bien s’il suffisait de soustraire la largeur de la barre latérale (lorsqu’elle est activée) à la largeur totale de la fenêtre utilisée lors d’une requête multimédia pour savoir si la classe de conteneur doit encore être réduite … mais comment puis-je configurer cette règle / requête?

La meilleure réponse à ce que vous demandez – comment calculer de manière dynamic la taille d’un conteneur de variables après la comptabilisation de la barre latérale – serait d’utiliser CSS calc , comme ceci:

 // Container is 100% of the viewport minus 250px (width of sidebar) width: calc(100% - 250px);

Cela vous donne un conteneur pleine largeur à n’importe quelle résolution, moins la barre latérale. Je suis allé plus loin et j’ai essayé de finir une interface ( DEMO sur Codepen , basé sur un exemple de startbootstrap.com ).

Au-dessus des tailles de tablette (768px):

la barre latérale droite est basculante
le conteneur principal réagit à la barre latérale en expansion (en utilisant calc)
les transitions sont lisses

Au-dessous des tailles de tablette 768px:

la barre latérale droite est fixée ouverte mais peut être basculée
le conteneur principal rest 100% largeur en tout temps
le conteneur principal est recouvert par la barre latérale à tout moment
les transitions sont lisses

La partie clé de ce code concerne le fonctionnement de #page-content-wrapper avec calc lorsque la classe #wrapper-toggled est appliquée de manière dynamic via JS.

 #page-content-wrapper { width: 100%; position: absolute; padding: 15px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; @media (min-width: 768px) { padding: 20px; position: relative; width: calc(100% - 250px); } } #wrapper.toggled #page-content-wrapper { position: absolute; width: 100%; @media (min-width: 768px) { position: relative; margin-right: 0; width: 100%; } }