Bootstrap Affix plugin avec mise en page fluide

Si je voudrais utiliser l'affixe de plugin dans la barre latérale dans le fluide de mise en page, mais la largeur de la barre latérale de toujours changer lorsqu'il est apposé et le responsive design ne fonctionne pas trop.

Dans le Bootstrap, documentation de l'affixe plugin n'est pas utilisé avec des fluides de mise en page.
Peut-être parce qu'ils ont le même problème.

Quelqu'un sait comment le faire fonctionner?

source d'informationauteur Toki

  1. 25

    Pour apposer à travailler avec un fluide span3 barre latérale, vous aurez besoin d'ajouter un peu de javascript pour la fixation de la largeur et de gérer les redimensionne.

    Je viens d'écrire une petite fonction javascript pour faire ce travail.

    Découvrez ce bug de bootstrap.

    /*
* Clamped-width. 
* Usage:
*  <div data-clampedwidth=".myParent">This long content will force clamped width</div>
*
* Author: LV
*/
$('[data-clampedwidth]').each(function () {
    var elem = $(this);
    var parentPanel = elem.data('clampedwidth');
    var resizeFn = function () {
        var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
        elem.css('width', sideBarNavWidth);
    };

    resizeFn();
    $(window).resize(resizeFn);
});
  2. 4

    La apposé démo sur leur site web est responsive, il se positionne sur le haut de la page comme prévu. Le position:fixed propriété CSS dans les appareils mobiles et sur les petits écrans n'est pas une option viable, de sorte que la fonctionnalité est supprimé.

  3. 1

    Vous devez définir explicitement la largeur de la propriété (ou min-width) de la barre de menu. Si vous regardez à la page Andres souligné, la classe "bs-docs-sidenav" a explicitement largeur de 228px.

    Il remplace le ".span3" de la classe et empêche la barre latérale de redimensionner comme vous le faites défiler jusqu'.

    Si vous supprimez explicite, la largeur de la déclaration et de faire défiler la page de la barre latérale redimensionne tout comme le problème que vous avez vu dans votre propre page.

  4. 1

    $(document).ready(function () {
  setTimeout(function () {
    $('.sidebar > *').affix({
      offset: {
        top: function () { return $window.width() <= 980 ? 290 : 210 }
        , bottom: 270
      }
    })
  }, 100)
});

    où votre page est comme:

    <div class="span2 navper">
  <ul class="nav nav-tabs nav-stacked" data-spy="affix">
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
  </ul>
</div>