What is the structure of the Bootstrap 3's navbar?

Question

While the Bootstrap documentation is very good, I am unable to understand the navbar structure from just one example in the documentation. I am trying to understand what are the sub-components of the navbar and how to use them. As far as I can tell, there are two areas of the navbar: a header and a collapse area. The header seems to be the place to put a brand name (to the left) and the toggle button to the right. It also seems like the area that will be always shown. Collapse seems to be the area for everything else and will be collapsed for smaller widths.

1. Is this the correct understanding? Are there any other areas?
2. What is the purpose of container-fluid wrapper? What if this wrapper is removed?
3. What kind of elements can go in each area?
4. What if I don't need any collapsable section? Should I put everything in the header?
5. What if I need three non-collapsible sections: left, middle and right?

Please help.

P.S. While the Bootstrap docuentation is very good, I wish that the components would be documented using some sort of a diagram identifying the various subcomponents and their intended behaviour and use.

Edit I found this tutorial on the Bootstrap Navbar that has many more examples - it is really nice. I can probably derive the patterns from there, but it would be nice if someone could articulate them more explicitly. For example, the very first example in this tutorial has a div with class navbar-header followed by a div with no class and containing all the links. This makes me think that one can add as many divs in the navbar as needed, navbar-header and navbar-collapse are just special purpose sub-components.

Answer 1

Based on @bto.rdz's advice, this was the solution I came up with for #5 navbar with left, middle and right sections:

<nav class="navbar navbar-inverse" role="navigation">

    <div class="container-fluid">

        <div class="row">
            <div class="col-xs-4 navbar-text">
                <a href="#" class="navbar-link">Left</a>
            </div>

            <div class="col-xs-4 navbar-text text-center">
                <a href="#" class="navbar-link">Middle</a>
            </div>

            <div class="col-xs-4 navbar-text text-right">
                <a href="#" class="navbar-link">Right</a>
            </div>
        </div>

    </div><!-- /.container-fluid -->
</nav>

I figured that since there is a container-fluid inside the navbar, why not create a row with 3 columns for the left, middle and right links. This almost worked except that it was breaking at 768 pixels. I traced this to Bootstrap adding 15px left and right margins at that breakpoint. I overrode this behavior as follows and now I have the desired behavior at all browser widths.

.navbar-text {
    margin-left: 0;
    margin-right: 0;
}