Affixe Bootstrap 3

Question

J'ai joué avec un preview of Bootstrap 3, et j'ai eu des problèmes avec le "affixe pluggin", qui permet des barres flottantes à position fixe.

Veuillez trouver un violon here montrant mes problèmes. Fondamentalement, le bouton de droite flotter, mais la largeur et le style de décalage hérité du système de grille semble disparaître lorsque position: fixed est appliquée.

Ceci est mon code:

<div class='container'> 
    <div class='row'> 
     <div class='col-span-8'> 
      <legend>Lorem</legend> 
      <div>[Large amounts of text]</div> 
     </div> 
     <div class='col-span-4 well' data-spy='affix' data-offset-top='50'> 
      <div class='btn btn-large btn-danger col-span-12'>This is fixed</div> 
     </div> 
    </div> 
</div> 

Qu'est-ce que je fais mal? (Je sais que Bootstrap 3 est encore en développement actif, mais j'espère que quelqu'un avec un aperçu ici.)

Answer 1

data-offset-top='50' ajoute la classe affix-top. Cette classe n'a pas de définition dans bootstrap.css. Après avoir fait défiler la page de la classe affix, remplacez la classe affix-top. affix définit la position fixée. Cela a provoqué différents affichages de votre div apposée.

Peut-être Changer votre code à montré ci-dessous fonctionne plus comme prévu. NB dans ce cas La div apposée n'est pas affichée sur les petits écrans ?!

<div class='container'> 
    <div class='row'> 
     <div class='col-span-8'> 
      <legend>Lorem</legend> 
      <div>[Large amounts of text]</div> 
     </div> 
     <div class='col-span-4'> 
      <div class="well col-span-4" data-spy='affix'> 
      <div class='btn btn-large btn-danger col-span-12'>This is fixed</div> 
      </div> 
     </div> 
    </div> 
</div>