Connecteur pour panneau bootstrap 3 avec mauvaise position boutons

Question

J’utilise bootstrap 3 et je voudrais ajouter un bouton dans l’en-tête du panneau, sur le coin supérieur droit. Lorsque vous essayez de les ajouter, ils sont indiquer ci-dessous la référence du titre.

Code : http://bootply.com/82631

Quels sont le CSS manquant, j’ajouterai à titre, en-tête de groupe ou boutons ?

Answer 1

Je voudrais commencer en ajoutant de classe à la avec classe. Ensuite, ajoutez les deux et à la tag. Puis, ajoutez `` , le cas échéant.

Voici le code complet :

http://bootply.com/98827

Answer 2

Je suis un peu en retard pour le jeu ici, mais la réponse la plus simple est de déplacer le H4 APRÈS le bouton div. C'est un problème courant lors de flottant, de toujours avoir votre flotte défini AVANT que le reste du contenu ou vous aurez supplémentaire de saut de ligne problème.

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

Le problème ici est que lorsque votre flotteurs sont définis d'après les autres éléments, le flotteur est top, vous allez commencer à la dernière ligne de la position de l'élément immédiatement avant qu'il. Donc, si l'élément précédent est renvoyé à la ligne 3, votre flotteur va commencer à la ligne 3 de trop.

Déplacer le flotteur vers le HAUT de la liste élimine le problème car il n'y a aucun précédent éléments de la pousser vers le bas et rien après le flotteur sera rendu à la ligne du haut (en supposant qu'il est en place sur la ligne pour tous les objets)

Answer 3

Vous devez demander un « clearfix » pour effacer l’élément parent. La prochaine chose, le h4 pour le titre de l’en-tête, étendent complètement de l’en-tête, donc après avoir appliqué clearfix, il faut pousser vers le bas de l’élément enfant causant la div en-tête d’avoir une plus grande hauteur.

Voici une solution, suffit de remplacer votre code.

Answer 4

J’ai placé un groupe à l’intérieur du titre et ensuite ajouté un clearfix vers le bas.

Answer 5

Vous êtes partie droite. avec il semble bien, mais je voudrais utiliser .

J’ai mis `` et il coud pour travailler.

Maintenant, il me suffit d’ajouter quelques vertical aligner.