Bootstrap: Navbar + list

Question

I am developing a web application in HTML5, where I use Bootstrap. In one of the application pages there will be a navbar at the top of the page and just below the navbar there will be a list. However when performing the implementation, list started at the same position of navbar, causing the problem of not displaying all items in the list, as the first item is hidden behind the navbar.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-chevron-left"></span></a>             
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">                    
                    <li style="border-right: 1px solid #ccc; border-left: 1px solid #ccc;"><a href="#"><span class="glyphicon glyphicon-remove"></span></a></li>
                    <li style="border-right: 1px solid #ccc;"><a href="#"><span class="glyphicon glyphicon-ok"></span></a></li>
                </ul>
            </div>
        </div>
    </nav>  

    <ul class="list-group">
        <li class="list-group-item" style="border-bottom: solid 1px #ccc; height: 3em; line-height: 3em;">
            <label>
                <input type="checkbox" /><a href="#"> teste 1</a>
            </label>
        </li>        
        <li class="list-group-item" style="border-bottom: solid 1px #ccc; height: 3em; line-height: 3em;">
            <label>
                <input type="checkbox" /><a href="#"> teste 2</a>
            </label>
        </li>        
        <li class="list-group-item" style="border-bottom: solid 1px #ccc; height: 3em; line-height: 3em;">
            <label>
                <input type="checkbox" /><a href="#"> teste 3</a>
            </label>
        </li>        
    </ul>

Answer 1

The grids system is organized into rows and columns, for one item not overlapping another, you must declare it within different rows by marking <div class="row">.

At first it seems that your code gets polluted, or even with many markings, but using correctly, it brings a very important feature, responsiveness, because the moment the content is viewed on a mobile, or tablet, it automatically adjusts, worth using.

<div class="row">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-chevron-left"></span></a>             
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">                    
                <li style="border-right: 1px solid #ccc; border-left: 1px solid #ccc;"><a href="#"><span class="glyphicon glyphicon-remove"></span></a></li>
                <li style="border-right: 1px solid #ccc;"><a href="#"><span class="glyphicon glyphicon-ok"></span></a></li>
            </ul>
        </div>
    </div>
</nav>
</div>  
<div class="row">
<ul class="list-group">
    <li class="list-group-item" style="border-bottom: solid 1px #ccc; height: 3em; line-height: 3em;">
        <label>
            <input type="checkbox" /><a href="#"> teste 1</a>
        </label>
    </li>        
    <li class="list-group-item" style="border-bottom: solid 1px #ccc; height: 3em; line-height: 3em;">
        <label>
            <input type="checkbox" /><a href="#"> teste 2</a>
        </label>
    </li>        
    <li class="list-group-item" style="border-bottom: solid 1px #ccc; height: 3em; line-height: 3em;">
        <label>
            <input type="checkbox" /><a href="#"> teste 3</a>
        </label>
    </li>        
</ul>
</div>