Cabeçalho do painel Bootstrap 3 com botões na posição errada

117

Estou usando o Bootstrap 3 e gostaria de adicionar alguns botões no cabeçalho do painel, no canto superior direito. Ao tentar adicioná-los, eles são mostrados abaixo da linha de base do título.

Código: http://bootply.com/82631

Quais são os CSS ausentes que devo adicionar ao título, cabeçalho do painel ou botões?

css twitter-bootstrap twitter-bootstrap-3

— Dedé
fonte

175

Eu começaria adicionando clearfixclasse à classe <div>com panel-heading. Em seguida, adicione panel-titlee pull-leftà H4tag. Em seguida, adicione padding-top, conforme necessário.

Aqui está o código completo:

<div class="panel panel-default">
    <div class="panel-heading clearfix">
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
      <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
    </div>
    ...
</div>

http://bootply.com/98827

— OregonJeff
fonte

Isso funciona, o único problema é que o Cabeçalho do Painel é puxado para o topo da div e o grupo btn se alinha verticalmente

— Nuno Furtado

9

Ou apenas remova o .panel-titledo <h4>e você não precisará do preenchimento.

— caw

153

Estou um pouco atrasado para o jogo aqui, mas a resposta simples é mover o H4 DEPOIS do botão div. Este é um problema comum durante a flutuação, sempre tenha seus floats definidos ANTES do resto do conteúdo ou você terá aquele problema de quebra de linha extra.

<div class="panel-heading">
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <h4>Panel header</h4>
</div>

O problema aqui é que quando seus flutuadores são definidos após outros itens, o topo do flutuante começará na última posição de linha do elemento imediatamente antes dele. Portanto, se o item anterior terminar na linha 3, seu float começará na linha 3 também.

Mover o float para o TOPO da lista elimina o problema porque não há elementos anteriores para empurrá-lo para baixo e qualquer coisa após o float será renderizado na linha superior (assumindo que haja espaço na linha para todos os itens)

Exemplo de ordenação correta e incorreta e os efeitos: http://www.bootply.com/HkDlNIKv9g

— getsaf
fonte

Se você não gosta do tamanho h4, use o <h4> <small> Cabeçalho do painel </small> </h4>

— Luciano Marqueto,

Não consigo descobrir por que meu botão não cabe dentro do cabeçalho do painel. O botão é pressionado pelo preenchimento do cabeçalho do painel e não aumenta a altura do cabeçalho do painel. O que estou fazendo de errado? (Editar: aparentemente isso foi por causa da adição de uma classe a um h4 ... mas ainda agora o título é muito alto.)

— Nate

1

Tive que adicionar clearfix ao cabeçalho do painel e adicionar o preenchimento como na resposta acima. Você pode fazer uma amostra / demonstração funcional?

— Nate

2

Nate, aqui está um exemplo de pedido correto versus pedido incorreto. bootply.com/HkDlNIKv9g

— getsaf

1

Acho que deveria ser mudada a classe btn-sm com btn-xs. Se encaixa melhor

— IlGala

40

Você deve aplicar um "clearfix" para limpar o elemento pai. Em seguida, o h4 para o título do cabeçalho se estende por todo o cabeçalho, portanto, depois de aplicar o clearfix, ele empurrará para baixo o elemento filho, fazendo com que o div do cabeçalho tenha uma altura maior.

Aqui está uma correção, basta substituí-la pelo seu código.

  <div class="panel-heading clearfix">
     <b>Panel header</b>
       <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
   </div>

Editado em 22/12/2015 - adicionado .clearfix ao título div

— andre3wap
fonte

3

deve funcionar se você adicionar a classe clearfix ao título do painel em vez de adicionar outra div vazia

— escapedcat

10

Coloquei o grupo de botões dentro do título e, em seguida, adicionei um clearfix na parte inferior.

<div class="panel-heading">
  <h4 class="panel-title">
    Panel header
    <div class="btn-group pull-right">
      <a href="#" class="btn btn-default btn-sm">## Lock</a>
      <a href="#" class="btn btn-default btn-sm">## Delete</a>
      <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
  </h4>
  <div class="clearfix"></div>
</div>

— Jonathan
fonte

1

mais elegante: <div class = "panel-header clearfix">;)

— Marwen Trabelsi

8

Tente colocar o btn-groupinterior H4assim ..

<div class="panel-heading">
    <h4>Panel header
    <span class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </span>
    </h4>
</div>

http://bootply.com/lpXoMPup2d

— Zim
fonte

Não, não é uma "boa prática", mas respondeu à pergunta original. Eu atualizo a resposta de acordo com a prática recomendada.

— Zim

6

Você está parcialmente certo. com <b>title</b>ele parece bom, mas eu gostaria de usar <h4>.

Eu coloquei <h4 style="display: inline;">e parece funcionar.

Agora, só preciso adicionar algum alinhamento vertical.

— Dedé
fonte

1

inline-blocké melhor.

— Dede

6

Neste caso, você deve adicionar .clearfixno final do contêiner com elementos flutuantes.

<div class="panel-heading">
    <h4>Panel header</h4>
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <span class="clearfix"></span>
</div>

http://www.bootply.com/NCXkOtIkD6

— Sargonpiraev
fonte

1

Descobri que usar uma classe adicional no cabeçalho do painel ajuda.

<div class="panel-heading contains-buttons">
   <h3 class="panel-title">Panel Title</h3>
   <a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>

E então usando este menos código:

.panel-heading.contains-buttons {
    .clearfix;
    .panel-title {
        .pull-left;
        padding-top:5px;
    }
    .btn {
        .pull-right;
    }
}

— Jon Joyce
fonte

0

O h4elemento é exibido como um bloco. Adicione uma borda a ele e você verá o que está acontecendo. Se você deseja flutuar algo à direita dele, você tem uma série de opções:

Coloque os itens flutuantes antes do elemento do bloco (h4).
Flutue o elemento h4 também.
Exiba o elemento h4 embutido.

Em qualquer caso, você deve adicionar a clearfixclasse ao elemento do contêiner para obter o preenchimento correto para seus botões.

Você também pode adicionar a panel-titleclasse ou ajustar o preenchimento do elemento h4.

— mrdeus
fonte

0

ou isto? Usando classe de linha

  <div class="row"> 
  <div class="  col-lg-2  col-md-2 col-sm-2 col-xs-2">
     <h4>Panel header</h4>
  </div>
 <div class="  col-lg-10  col-md-10 col-sm-10 col-xs-10 ">
    <div class="btn-group  pull-right">
       <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
     </div>
  </div>
</div>

— Kanit P.
fonte