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

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?

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

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

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

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>

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

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.

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

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;
    }
}

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:

1. Coloque os itens flutuantes antes do elemento do bloco (h4).
2. Flutue o elemento h4 também.
3. 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.

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>