2013-08-31 7 views
5

S'il vous plaît trouver ma conception ici: http://jsfiddle.net/2JGQa/Bootstrap 3.0: colonne fixe

je voudrais fixer la colonne de gauche (inclus testlab_fr, courrier 1er, ..., courrier 10eme) comme mon en-tête, comment je peux le faire ?

J'ai vu l'affixe mais je ne sais pas comment l'utiliser.

<div class="row"> 
<div class="col-sm-4"> 
    <div class="row"> 
    <ul class="list-group"> 

      <li class="list-group-item"> 
      <span class="badge">175</span> 
      testlab_fr 
      </li> </ul> 
    </div> 
    <div class="row"> 

    <div class="list-group"> 


     <a href="http://localhost/mailbox/testlab_fr,26860-html" class="link_mail list-group-item active"> 
      <h4 class="list-group-item-heading">1er mail</h4> 
      <p class="list-group-item-text">il y a 1 hours</p> 
     </a> 
     <a href="http://localhost/mailbox/testlab_fr,25877-html" class="link_mail list-group-item"> 
      <h4 class="list-group-item-heading">10ème mail</h4> 
      <p class="list-group-item-text">il y a 2 heures</p> 
     </a> </div> 
    </div> 
</div><!-- /.col-sm-4 --> 

Répondre

3

Vous trouverez la documentation pour l'affixe plugin ici: http://getbootstrap.com/javascript/#affix wrap il éléments que vous souhaitez apposer dans un conteneur div (avec B.E. id = « subnav »).

Définissez l'affixe de ce conteneur par Javascript ou Via les attributs de données.

javascript: $('#subnav').affix(); ou via les attributs de données: <div id="subnav" data-spy="affix">

Parce que vous ne voulez pas que les éléments chevauchent votre barre de navigation fixe, vous devrez définir le décalage supérieur. Le décalage supérieur doit être au moins la hauteur de votre barre de navigation. Si votre conception a un pied de page, vous pouvez également définir le décalage inférieur. Parce que vous ne voulez pas que l'élément fixé chevauche le pied de page.

Javascript: $('#subnav').affix({offset:{top:150,bottom:150}}); ou par attributs de données: <div id="subnav" data-spy="affix" data-offset-top="150" data-offset-bottom="150">

Utilisez CSS pour fixer les éléments sur le dessus de vos documents: .affix{position:fixed;top:0px;}

Plus exemples: https://github.com/twbs/bootstrap/pull/9902/files

+0

Il ne fonctionne pas J'essaie ceci: http: // jsFiddle. net/2JGQa/5/ mais rien .... Je veux fixer le haut et le gauche, comment je peux faire ça? – eXorus

+0

votre violon n'inclut pas le (s) plugin (s) javascript de Bootstrap et également jQuery manquant, voir: http://jsfiddle.net/2JGQa/7/ –

+0

Oui, merci beaucoup pour la solution. Mais mon design est flexible donc avec cette méthode j'utilise la largeur: 225px donc c'est mauvais. – eXorus