0

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>

1 Resposta 1

1

O sistema de grids é organizado em linhas e colunas, para um item não sobrepor outro, você deve declará-lo dentro de linhas diferentes através da marcação <div class="row">.

No início parece que seu código fica poluído, ou até com muitas marcações, mas utilizando corretamente, ele traz um recurso muito importante, a responsividade, pois no momento que o conteúdo for visualizado num celular, ou tablet, ele se ajusta automaticamente, vale a pena usar.

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .