Twitter Bootstrap 3 - Affix Top Navigation bar is not working

Question

I'm using Twitter Bootstrap 3 framework. Look at this FIDDLE and you'll understand my problem.

1. Affix is not working properly.
2. Navigation Items are not in horizontal.

Please help me in resolving this issue.

And one more help, if there's any bootstrap classes list available that'd help me too.

HTML CODE:

<div class="container" data-spy="affix" data-offset-top="100" id="nav">
    <div class="navbar well">
        <div class="navbar-inner">
            <div class="container">
                <div class="col-md-12">
                     <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Contact</a></li>
                     </ul>
                </div>
            </div> 
        </div> 
    </div> 
</div>

Answer 1

First of all, for the menu, you shouldn't use divs with classes "container" and " col-md-12 ". This is just a suggestion.

The fastest way to solve your problem, is to rewrite the next css:

.nav > li {
    position: relative;
    display: inline-block;
}