1

Estou tentando colocar um botão dentro do título de um panel do twitter bootstrap 3, porém esse botão não fica alinhado centralizado na vertical do panel.

inserir a descrição da imagem aqui

Código:

<div class="panel panel-default">
    <div class="panel-heading"> 
        Fórum
        <div class="pull-right"><button class="btn">Criar tópico</button>       </div>
        </div>
        <div class="panel-body">

        </div>


</div>

2 Respostas 2

4

Tente usar um botão menor, o que ocorre, é que as margens do button estão estourando a div do header do panel.

<button class="btn btn-xs">Criar tópico</button>

Ocorre que o botão normal é do mesmo tamanho do header de um panel, mas usando um botão do tipo extra-small fica perfeito nesta situação.

Ficaria até estranho o header ser muito ampliado pelas margens.

JSFiddle: http://jsfiddle.net/aymone/4tfuL/

2
  • Obrigado, isso resolve também. Commented 25/07/2014 às 18:45
  • Além disso, teria de adicionar um pouco de css, pois o panel não é feito para adicionar botões no header e sim no body, dá uma olhada no fiddle... Commented 25/07/2014 às 18:50
0

Eu fiz assim e funcionou:

<div class="panel-heading">
                      <div class="row"> <h3 class="col-xs-11 panel-title">Fórum</h3>
                            <div class="pull-right col-xs-1"><a href="#" class="btn btn-info btn-xs" style="border:0">Criar Tópico</a></div>
                      </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 .