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:
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.
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.
É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.
Essayez de placer le btn-group
dans le H4
comme ceci ..
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.
J’ai trouvé en utilisant une classe supplémentaire sur le .panel-en-tête aide.
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:
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.