Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Bootstrap - Cols dentro de um panel

por Ramon Oliveira Cardoso
| 91.8k xp | 29 posts
Técnico de Regulação

Galera, boa noite!

Estou tentando criar um panel com list-group dentro que mostra algumas informações em bootstrap, contendo um texto e uma badge que mostra um valor dele. Tem uma determinada linha que tem um nome muito grande e por conta disso, quando boto em modo responsivo e em tamanho pequeno pra ver se ficou legal, o resultado fica torto.

Estou tentando usar row e col mas não sei se estou fazendo certo e estou muito confuso. Tentei criar divs para todos os itens da lista, botando estas como col-xs-12 mas o resultado final é que a borda e as linhas do panel somem (porém fica tudo alinhado certinho).

Se alguém puder me mostrar como acertar esse negócio, ficaria muito, MUITO agradecido, pois estou ficando louco!

Segue o code:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
  <header>
      <nav class="navbar navbar-default">
          <div class="container">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Sistemão - Listar Unidades</a>
              </div>     
              <div class="collapse navbar-collapse" id="collapse-navbar">
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link Link Link</a></li>
                    <li><a href="#">Link</a></li>
                  </ul>
              </div>
          </div>
      </nav>
  </header>


  <div class="container">
      <div class="row">
              <div class="col-xs-12">
                  <div class="panel panel-info">
                      <div class="panel-heading">
                          <h3 class="panel-title text-center">Seleção:</h3>
                      </div>
                      <ul class="list-group">
                        <a href="#" class="list-group-item">Competência: <span class="badge">861954</span></a>
                        <a href="#" class="list-group-item">Quantidade de Unidades Selecionadas: <span class="badge">369 de 7927</span></a>
                        <a href="#" class="list-group-item">Situação: <span class="badge">ATIVA</span></a>
                        <a href="#" class="list-group-item">AP: <span class="badge">Todas</span></a>
                        <a href="#" class="list-group-item">Nível: <span class="badge">Todos</span></a>
                        <a href="#" class="list-group-item">Tipos de Unidades: <span class="badge">Todos</span></a>
                        <a href="#" class="list-group-item">Equipes de SF: <span class="badge">Todas</span></a>
                        <a href="#" class="list-group-item">Sistemas de Informação: <span class="badge">Todos</span></a>
                        <a href="#" class="list-group-item">Gestão: <span class="badge">Todas</span></a>
                        <a href="#" class="list-group-item">Estrutura Física: <span class="badge">Todas</span></a>
                        <a href="#" class="list-group-item">Relatório: <span class="badge">Nenhum</span></a>
                      </ul>
                  </div>
              </div>      
      </div>
  </div>    

    <script src="jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="navbar-animation-fix.js"></script>
</body>
</html>

Edit 1: Sem querer botei como off-topic! Erro meu. Caso tenha que recriar em front, fala ai.

Edit 2: Caso tenham outros pitacos pra dar também sobre o code, por favor, façam! Obrigado!

3 respostas
por Bruno Rodrigues
| 199.6k xp | 43 posts
Fullstack Developer

Boa noite Ramom, tudo joia ?

colei o seu codigo no fiddleJS, e não consegui identificar o erro que você descreveu, da uma olhada, aqui para mim parece tudo certo.

https://jsfiddle.net/qLfega29/

por Ramon Oliveira Cardoso
| 91.8k xp | 29 posts
Técnico de Regulação

Opa, boa noite Bruno!

Cara, você tem que pegar aquela tela do fiddle que mostra como o código ficaria e diminuir o tamanho dela. Eu tentei com a janela do browser em fullscreen mas não consegui, então deixei num tamanho menor e consegui fazer isto.

De qualquer maneira, estou te mandando uma imagem também pra você ver, segue o link:

http://imgur.com/a/PcU99

solução!
por Ramon Oliveira Cardoso
| 91.8k xp | 29 posts
Técnico de Regulação

Apenas para concluir o tópico, consegui solucionar meu problema. Para quem vier a passar por isto, a solução que eu utilizei foi de mudar a estrutura do panel de maneira que, ao invés de eu usar um list-group, optei por fazer a implementação de uma tabela (tem na documentação do Bootstrap). Acabou que o resultado graficamente ficou o mesmo e diria que em questão de usabilidade, melhor.

Segue o código com exemplo da minha implementação:

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title text-center">Seleção:</h3>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover">

                            <tr>
                                <th class="col-sm-10">Filtro</th>
                                <th class="col-sm-2 text-center">Info</th>
                            </tr>

                            <tr>
                                <td>Competência:</td>
                                <td class="text-center"><span class="badge">861954</span></td>
                            </tr>

                            <tr>
                                <td>Quantidade de Unidades Selecionadas:</td>
                                <td class="text-center"><span class="badge">369 de 7927</span></td>
                            </tr>

                            <tr>
                                <td>Situação:</td>
                                <td class="text-center"><span class="badge">ATIVA</span></td>
                            </tr>

                            <tr>
                                <td>AP:</td>
                                <td class="text-center"><span class="badge">Todas</span></td>
                            </tr>

                            <tr>
                                <td>Nível:</td>
                                <td class="text-center"><span class="badge">Todos</span></td>
                            </tr>

                            <tr>
                                <td>Tipos de Unidades:</td>
                                <td class="text-center"><span class="badge">Todos</span></td>
                            </tr>

                            <tr>
                                <td>Equipes de CF:</td>
                                <td class="text-center"><span class="badge">Todas</span></td>
                            </tr>

                            <tr>
                                <td>Sistemas de Informação:</td>
                                <td class="text-center"><span class="badge">Todos</span></td>
                            </tr>

                            <tr>
                                <td>Gestão:</td>
                                <td class="text-center"><span class="badge">Todas</span></td>
                            </tr>

                            <tr>
                                <td>Estrutura Física:</td>
                                <td class="text-center"><span class="badge">Todas</span></td>
                            </tr>

                            <tr>
                                <td>Relatório:</td>
                                <td class="text-center"><span class="badge">Nenhum</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>