En-tête de panneau Bootstrap 3 avec boutons mauvaise position

J'utilise Bootstrap 3 et je voudrais ajouter quelques boutons dans l'en-tête du panneau, dans le coin supérieur droit. Lorsque vous essayez de les ajouter, ils sont affichés sous la ligne de base du titre.

Code: http://bootply.com/82631

Quels sont les CSS manquants que je devrais ajouter au titre, à l'en-tête du panneau ou aux boutons?

Je commencerais par ajouter une clearfixclasse à la classe <div>with panel-heading. Ensuite, ajoutez à la fois panel-titleet pull-leftà la H4balise. Ensuite, ajoutez padding-top, si nécessaire.

Voici le code complet:

<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

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

<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 vos flottants sont définis après d'autres éléments, le haut du flotteur commencera à la dernière position de ligne de l'élément immédiatement avant lui. Donc, si l'élément précédent revient à 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 précédents pour le pousser vers le bas et tout ce qui suit 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 des effets: http://www.bootply.com/HkDlNIKv9g

Vous devez appliquer un "clearfix" pour effacer l'élément parent. Ensuite, le h4 pour le titre de l'en-tête s'étend sur tout l'en-tête, donc après avoir appliqué clearfix, il poussera l'élément enfant vers le bas, ce qui fera que le div d'en-tête aura une hauteur plus grande.

Voici un correctif, remplacez-le simplement par votre code.

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

Modifié le 22/12/2015 - ajout de .clearfix à l'en-tête div

J'ai placé le groupe de boutons à l'intérieur du titre, puis j'ai ajouté un clearfix en bas.

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

Essayez de mettre l' btn-groupintérieur H4comme ça.

<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

Vous avez raison. avec <b>title</b>ça a l'air bien, mais je voudrais utiliser <h4>.

J'ai mis <h4 style="display: inline;">et ça semble fonctionner.

Maintenant, je n'ai plus qu'à ajouter un alignement vertival.

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

<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

J'ai trouvé que l'utilisation d'une classe supplémentaire sur l'en-tête .panel aide.

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

Et puis en utilisant ce moins de code:

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

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

1. Placez les éléments flottants avant l'élément bloc (h4).
2. Faites également flotter l'élément h4.
3. Affichez l'élément h4 en ligne.

Dans les deux cas, vous devez ajouter la clearfixclasse à l'élément conteneur pour obtenir un remplissage correct pour vos boutons.

Vous pouvez également ajouter la panel-titleclasse à, ou ajuster le remplissage sur, l'élément h4.

ou ca? En utilisant la classe de ligne

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