5

Please find my design here : http://jsfiddle.net/2JGQa/

I would like to fix the left column (included testlab_fr, 1er mail, ... , 10eme mail) like my header, how I can do that ?

I saw affix but I don't know how to use it.

<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 -->
madth3
  • 7,275
  • 12
  • 50
  • 74
eXorus
  • 93
  • 1
  • 1
  • 7

1 Answers1

3

You will find the docs for the affix plugin here: http://getbootstrap.com/javascript/#affix wrap he elements you want to affix in a container div (b.e. with id="subnav").

Set the affix of this container by Javascript or Via data attributes.

javascript: $('#subnav').affix(); or via data attributes: <div id="subnav" data-spy="affix">

Cause you don't want you elements overlap your fixed navbar you will have to set top offset. The top offset should be at least the height of your navbar.

If your design got a footer you will also set the bottom offset. Cause you don't want the affixed element overlap the footer.

Javascript: $('#subnav').affix({offset:{top:150,bottom:150}}); or via data attributes: <div id="subnav" data-spy="affix" data-offset-top="150" data-offset-bottom="150">

Use CSS to affix the elements on the top of your documents: .affix{position:fixed;top:0px;}

More examples: https://github.com/twbs/bootstrap/pull/9902/files

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • It's not working I try this : http://jsfiddle.net/2JGQa/5/ but nothing .... I want to fix the top and the left, how I can do that ? – eXorus Sep 21 '13 at 17:02
  • your fiddle does NOT include Bootstrap's javascript plugin(s) and also missing jQuery, see: http://jsfiddle.net/2JGQa/7/ – Bass Jobsen Sep 21 '13 at 18:15
  • Yes, thanks a lot for the solution. But my design is flexible so with this method I use width:225px so this is bad. – eXorus Sep 22 '13 at 12:50
  • The witdh of your fixed element will be 100% of the viewport. Cause the element is wrapped in a col-sm-4 (25% of the viewport) you could set the width of your sidebar to 25% too. `.affix{width:25%;}` – Bass Jobsen Sep 22 '13 at 12:58
  • My comment about `.affix{width:25%;}` was wrong. col-sm-4 don't get 25% of the viewport, it gets 33% of the .container parent. Maybe 25% of the viewport (width of your affix) fits here. See: http://stackoverflow.com/a/18966454/1596547 for a better solution. – Bass Jobsen Sep 23 '13 at 18:46