0

Tenho um painel e dentro dele uma barra de progresso, onde criei uma linha dentro do painel e coloquei minha barra de progresso.

HTML:

div class="panel with-nav-tabs panel-success">
        <div class="panel-heading">Etapa</div>
        <div class="panel-body"> 
        </div>
        <div class="row">
         <div class="col-md-6 col-md-offset-2">
         <div class="progress progress-success">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        </div>
    </div>
        </div>

Resultado: inserir a descrição da imagem aqui

Problema: Está ocupando muito espaço da tela pois a altura da linha é muito grande para a barra de progresso. Alguém sabe como diminuir para ocupar menos espaço?

1 Resposta 1

1

Por que você simplesmente não define uma largura para o elemento via CSS?

body {
  background-color:#ccc !important; /* Apenas para ver a barra melhor, não é necessário */
}

div.progress {
  margin:50px auto; /* Posicionar melhor a barra nesse exemplo, não é necessário */
  width:250px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    Exemplo
  </div>
</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 .