Question

I can only view the navbar, when the nav class is inside the container.

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li><a href="#">Recruitment</a></li>
                <li><a href="#">Exits</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>

Which looks as follows:

If I use the sample on the bootstrap site, such as below, I cannot view the navbar. It shows up all messed up. I am at a loss as to why.

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
                <li><a href="#">Recruitment</a></li>
                <li><a href="#">Exits</a></li>
                <li><a href="#">Link</a></li>
            </ul>
    </div>
</div>

Please Disregard the ‘3g’ image. It is from another div.

In both cases, this navbar is nested inside a container. I have not modified the bootstrap css in anyway. Just to be sure, I downloaded a fresh copy and overwrote the bootstrap files.

What gives?

Answer 1

Your code (the “wrong” one) is working propperly with Bootstrap 2.1.1. Look here

Check your version of Bootstrap. If you use up-to-date sample code with an old version of the framework these kind of issues could appear.