Twitter Bootstrap - Responsive apposer

Question

Je suis en utilisant Twitter Bootstrap et j'ai le texte suivant:

<div class="row">

    <div class="span3">
        <div data-spy="affix">
            <form>
                <!-- inputs and stuff -->
            </form>
        </div>
    </div>

    <!-- span9 and its contents -->

</div>

Bootstrap est de la bonne application de l'apposer effet sur <div> et il reste encore quand je scroll vers le bas de la page. Cependant, une fois que j'ai redimensionner la page pour mobile dimensions et bootstrap responsive effets (barre de navigation s'effondrer/objets en alignant bien dans les uns des autres), la apposé <div> est maintenant au-dessus des autres éléments de la page, et ça devient pénible. Ce qui se passe parce qu' .affix a position: fixed ce qui explique assez bien.

Maintenant, je suis allé à Bootstrap's site web et de redimensionner la page pour mobile dimensions, l'élément apposé (<ul> dans leur cas) commence à couler bien avec la page, en prenant sa place naturelle, sans aller au-dessus des autres éléments. J'ai aussi remarqué que lorsque cela se produit, la classe est modifié à partir d' affix de affix-top.

Je ne sais pas si c'est leur personnalisation ou si elle fait partie du cadre, car le cadre est apparemment pas se comporter de la même manière. Quelqu'un peut-il fournir des précisions sur ce? J'ai besoin d'avoir le même problème sur mon <div> où si la page est redimensionnée pour mobile dimensions de la apposé élément prend sa place naturelle.

Edit: Mon observation est un peu faussée. J'ai remarqué que l'élément sur leur page initialement, affix-top et une fois que j'ai faites défiler vers le bas data-top-offset il se transforme en affix. Il n'explique toujours pas pourquoi mon <div> ne sont pas rendues comme leur <ul> lorsqu'il est redimensionné.

Answer 1

Bootstrap utilise un extra fichier CSS pour leurs docs qui remplace le comportement par défaut de certains éléments.

Plus précisément, sur la ligne 917, ils changent position de la apposé barre latérale (dans le cadre d'une requête pour <767px largeur) static:

.bs-docs-sidenav.affix {
  position: static;
  width: auto;
  top: 0;
}

Ils ont plusieurs autres styles personnalisés appliqué à la apposé barre latérale; vous pouvez les afficher en utilisant Chrome Web Inspector/Firebug sur un téléphone de la taille de la fenêtre.

Answer 2

HTML de Ne pas apposer le span3 (ou span4 etc) DIV, mais un enfant; dans mon cas, j'ai apposé #sidebar. Aussi, vous n'avez pas à ajouter .affixe de classe ou de données-offset-top="XXX" à cette div. Le code Javascript suivant fera l'affaire.

  <aside class="span3">
    <div id="sidebar">
     <p>some content</p>
    </div>
  </aside> 

CSS (le code ci-dessous n'existe pas sur bootstrap.css, j'ai copié à partir de http://twitter.github.io/bootstrap/assets/css/docs.css)

.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 400px;
}

Javacript suivantes js va changer de classe de #sidebar .apposer .apposez-bas, en fonction de la page défile

   $('#sidebar').affix({
      offset: {
        bottom: 450
      }
   });

En effet, sur les petites résolutions #sidebar va se superposent à d'autres éléments. Pour résoudre ce utiliser bootstrap de requêtes de média http://twitter.github.io/bootstrap/scaffolding.html#responsive

Comme Sara, il a été souligné précédemment, vous pouvez utiliser quelque chose comme..

@media(max-width:767px){
   .affix {
     position: static;
     width: auto;
     top: 0;
    }
}

..alors que vous faites le #sidebar se comporter.

Espérons que cela aide quelqu'un!

Answer 3

J'ai eu le même problème, et ma solution a été de supprimer l'affixe de comportement pour les petites tailles d'écran. Par exemple, pour le supprimer pour les tailles inférieures à 1199 pixels:

#map {

  @media (min-width: 1199px) {
    &.affix-top {
    }

    &.affix {
      position: fixed;
      top: 20px;
      bottom: 100px;
    }

    &.affix-bottom {
    }
  }
}