Bootstrap 3 en-tête de panneau avec des boutons mal positionnés

J’utilise boostrap 3 et j’aimerais append un bouton dans l’en-tête du panneau, dans le coin supérieur droit. Lorsque vous essayez de les append, ils apparaissent sous la ligne de base du titre.

Code: http://bootply.com/82631

Quelles sont les CSS manquantes que je devrais append au titre, à l’en-tête du panneau ou aux boutons?

Je commencerais par append la classe clearfix à la

avec la classe de panel-heading . Ensuite, ajoutez à la fois le panel-title et pull-left sur l’étiquette H4 . Ensuite, ajoutez le padding-top , si nécessaire.

Voici le code complet:

 

Panel header

...

http://bootply.com/98827

Je suis un peu en retard sur le jeu ici, mais la réponse simple est de déplacer le H4 APRÈS le div du bouton. C’est un problème courant en flottant, toujours vos flottants définis AVANT le rest du contenu ou vous aurez ce problème de saut de ligne supplémentaire.

 

Panel header

Le problème ici est que lorsque vos flottants sont définis après d’autres éléments, le sumt du flottant commencera à la dernière position de ligne de l’élément immédiatement avant. Donc, si l’élément précédent est ajouté à la ligne 3, votre flottant commencera également à la ligne 3.

Déplacer le flottant vers le haut de la liste élimine le problème car il n’y a pas d’éléments antérieurs pour le faire tomber et rien après que le flottant sera rendu sur la ligne supérieure (en supposant qu’il y ait de la place sur la ligne pour tous les éléments)

Exemple de commande correcte et incorrecte et effets: http://www.bootply.com/HkDlNIKv9g

Vous devez appliquer un “clearfix” pour effacer l’élément parent. La prochaine chose, le h4 pour le titre de l’en-tête, s’étend tout au long de l’en-tête, donc après avoir appliqué clearfix, il poussera l’élément enfant provoquant une hauteur plus grande de l’en-tête div.

Voici un correctif, remplacez-le par votre code.

  
Panel header

Édité le 22/12/2015 – ajout de .clearfix à la rubrique div

J’ai placé le groupe de boutons dans le titre, puis ajouté un correctif au bas.

 

Panel header

Essayez de placer le btn-group dans le H4 comme ceci ..

 

Panel header ## Lock ## Delete ## Move

http://bootply.com/lpXoMPup2d

Vous avez raison avec title ça a l’air bien, mais j’aimerais utiliser

.

J’ai mis

et cela semble fonctionner.

Il ne me rest plus qu’à append un alignement de verticalité.

Dans ce cas, vous devez append .clearfix à la fin du conteneur avec des éléments flottants.

 

Panel header

http://www.bootply.com/NCXkOtIkD6

J’ai trouvé en utilisant une classe supplémentaire sur le .panel-en-tête aide.

 

Panel Title

Create

Et puis en utilisant ce code moins:

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

L’élément h4 est affiché sous la forme d’un bloc. Ajoutez-y une bordure et vous verrez ce qui se passe. Si vous souhaitez faire flotter quelque chose à droite, vous avez plusieurs options:

  1. Placez les objects flottants avant l’élément block (h4).
  2. Flotter l’élément h4 aussi.
  3. Affiche l’élément h4 en ligne.

Dans les deux cas, vous devez append la classe clearfix à l’élément container pour obtenir un remplissage correct pour vos boutons.

Vous pouvez également vouloir append la classe de panel-title ou ajuster le remplissage de l’élément h4.

ou ca? En utilisant la classe de ligne

  

Panel header