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!
