Twitter bootstrap 3: barre de navigation changements de largeur lorsque apposer des incendies

Bien, j'ai un curieux problème concernant le bootstrap 3 apposer script. Vous pouvez voir le problème dans ce violon. Merci de maximiser le résultat-image horizontalement et faites défiler vers le bas de sorte qu'apposer obtient déclenché. Comme vous pouvez le voir, la barre de navigation augmente sur le côté droit et je ne vois aucune raison pour cet effet. J'ai temporairement résolu le problème en addng

 .container
{
padding-left: 0px;
padding-right: 0px;
}

à la css. Mais, comme vous pouvez le voir, ce n'est pas très jolie et je ne veux pas supprimer ces remplissages. Sinon, je peux définir une largeur statique, comme

width: 1140px;

dans #nav.apposer. Mais ce n'est pas très réactif... j'ai vraiment essayé beaucoup d'approches, mais ne pouvaient pas obtenir des résultats satisfaisants. Savez-vous, quelle en est la cause?

Modifier

Ok, google Chrome, débogueur me donne plus d'infos: Avant d'apposer est déclenché, la valeur liquidative de l'élément obtenu la classe 'apposer-haut" parmi d'autres (abstrait à partir de chrome-débogueur PAS de source html!):

<nav id="nav" class="navbar navbar-default affix-top" role="navigation" data-spy="affix" data-offset-top="133" style="background-color: yellow">

Curieusement, fixez-dessus n'est pas déclarée dans le code HTML. Néanmoins, #nav.la valeur liquidative.barre de navigation.navbar-par défaut-apposer le-haut est de la taille de la forme: 1140px x 52px.

Après le défilement et l'apposer est déclenché, la classe 'apposer-top' devient 'code' et 'code' est de la taille de la forme: 1170px x 52px.

Ce sont les 30px, la barre de navigation pousse vers la droite. Mais comment puis-je l'arrêter? Par-dessus tout, je ne peut pas trouver la classe d'apposer-dessus de toute csv, fichiers...

OriginalL'auteur Dong3000 | 2014-05-26

9

Vous ne pouvez pas résoudre. Le problème est le position: fixed;. La barre de navigation sera rendu par le navigateur sans left ou right propriété.

Vous ne pouvez résoudre le problème à trois choses:

1. Utiliser le positionnement absolu.

Utilisation position: absolute; et modifier le top valeur de défilement à l'aide de jQuery. inconvénient: Vous avez besoin d'un Javascript-partie.

2. mis à gauche/droite

Définir un left: ?px; ou right: ?px

3. définir une largeur spéciale

Définir un min-width: ?px; et/ou max-width: ?px; pour chaque media-query

Thx, je pense que je vais préférer le max-width-solution 🙂

OriginalL'auteur Adrian Preuss
4

Il a travaillé pour moi quand j'ai donné l'affixe de classe un min-width de 100%. Fonctionne avec sensible.

OriginalL'auteur Florian Fischer

Je ne peux pas confirmer que

min-width:100%

a fonctionné pour moi.
J'ai résolu le problème en utilisant le innerWidth de la div parent. L'Exemple suivant (comprend un col qui, évidemment, doit être mis dans un récipient et une ligne...):

<div class="col-sm-3 col-lg-2">
  <div class="sidebar">
    <div class="panel-heading">Some Title</div>
       <div class="panel-body">
         Some Content
       </div>
    </div>
  </div>
</div>

Suivantes JS définir la largeur de la propriété à la première de 'apposer.bs.apposer'.
J'ai également assuré la fenêtre se redimensionne serait attiré aussi bien par l'ajout d'un gestionnaire pour son événement de redimensionnement:

  //Applied affix to sidebar class
  $('.sidebar').affix({
        offset: {
            top: 0
        }
    }).on('affix.bs.affix',function(){
        setAffixContainerSize();
    });

    /*Setting the width of the sidebar (I took 10px of its value which is the margin between cols in my Bootstrap CSS*/
    function setAffixContainerSize(){
        $('.sidebar').width($('.sidebar').parent().innerWidth()-10);
    }

    $(window).resize(function(){
        setAffixContainerSize();
    });

Profiter.

Cette méthode fonctionne mieux si le apposé nav est dans une colonne qui ne prend pas toute la largeur d'une ligne.

OriginalL'auteur Mike

Vous devez vous connecter pour publier un commentaire.