Estou desenvolvendo uma aplicação web em HTML5, onde utilizo Bootstrap. Em uma das páginas da aplicação haverá uma navbar
no topo da página e logo abaixo da navbar
haverá uma lista. Porém ao realizar a implementação, lista iniciou na mesma posição da navbar
, causando o problema de não exibir todos os itens da lista, pois o primeiro item está escondido atrás da 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>