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

117

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?

css twitter-bootstrap twitter-bootstrap-3

— Dédé
source

175

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

— OregonJeff
source

Cela fonctionne, le seul problème est que Panel Header est tiré vers le haut de la div et que le groupe btn s'aligne verticalement

— Nuno Furtado

9

Ou retirez simplement le .panel-titlede <h4>et vous n'aurez pas besoin du rembourrage.

— caw du

153

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

— getsaf
source

Si vous n'aimez pas la taille h4, utilisez <h4> <small> En-tête de panneau </small> </h4>

— Luciano Marqueto

Je ne comprends pas pourquoi mon bouton ne rentre pas dans l'en-tête du panneau. Le bouton est enfoncé par le remplissage de l'en-tête de panneau et n'augmente pas la hauteur de l'en-tête de panneau. Qu'est-ce que je fais mal? (Edit: apparemment, c'était à cause de l'ajout d'une classe à un h4 ... mais encore maintenant le titre est trop haut.)

— Nate

1

J'ai dû ajouter clearfix à l'en-tête du panneau et ajouter le rembourrage comme dans la réponse ci-dessus. Pouvez-vous faire un échantillon / démo fonctionnel?

— Nate

2

Nate, voici un exemple de commande correcte ou incorrecte. bootply.com/HkDlNIKv9g

— getsaf

1

Je pense que cela devrait être changé la classe btn-sm avec btn-xs. Ça va mieux

— IlGala

40

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

— andre3wap
source

3

devrait fonctionner si vous ajoutez la classe clearfix à l'en-tête du panneau au lieu d'ajouter un autre div vide

— escapedcat

10

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>

— Jonathan
source

1

plus élégant: <div class = "panel-tête clearfix">;)

— Marwen Trabelsi

8

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

— Zim
source

Non, ce n'est pas une «bonne pratique», mais cela a répondu à la question initiale. Je mets à jour la réponse selon les meilleures pratiques.

— Zim

6

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.

— Dédé
source

1

inline-blockest mieux.

— Dédé le

6

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

— Sargonpiraev
source

1

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

— Jon Joyce
source

0

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:

Placez les éléments flottants avant l'élément bloc (h4).
Faites également flotter l'élément h4.
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.

— mrdeus
source

0

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>

— Kanit P.
source