Bootstrap: Navbar + list

Navigation
0

I'm developing an HTML5 web application, where I use Bootstrap. On one of the application pages there will be navbar at the top of the page and just below navbar there will be a list. However, when performing the implementation, the list started in the same position as navbar , causing the problem of not displaying all items in the list, since the first item is hidden behind 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>
    
asked by anonymous 03.07.2014 / 14:42

1 answer

1

The grids system is organized into rows and columns so that one item does not overlap another, you must declare it within different rows by setting <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 phone, or tablet, it adjusts automatically , it's 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>
    
03.07.2014 / 14:51
Treemap - layout The actual use of this [duplicate]