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?
.panel-title
do<h4>
e você não precisará do preenchimento.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.
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
fonte
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.
Editado em 22/12/2015 - adicionado .clearfix ao título div
fonte
Coloquei o grupo de botões dentro do título e, em seguida, adicionei um clearfix na parte inferior.
fonte
Tente colocar o
btn-group
interiorH4
assim ..http://bootply.com/lpXoMPup2d
fonte
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.
fonte
inline-block
é melhor.Neste caso, você deve adicionar
.clearfix
no final do contêiner com elementos flutuantes.http://www.bootply.com/NCXkOtIkD6
fonte
Descobri que usar uma classe adicional no cabeçalho do painel ajuda.
E então usando este menos código:
fonte
O
h4
elemento é 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:Em qualquer caso, você deve adicionar a
clearfix
classe ao elemento do contêiner para obter o preenchimento correto para seus botões.Você também pode adicionar a
panel-title
classe ou ajustar o preenchimento do elemento h4.fonte
ou isto? Usando classe de linha
fonte