Bootstrap 3.0 : Fixed column

Question

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 -->

Answer 1

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