web-dev-qa-db-fra.com

Bootstrap En-tête de 3 panneaux avec boutons mal positionnés

J'utilise boostrap 3 et j'aimerais ajouter un bouton 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?

csstwitter-bootstraptwitter-bootstrap-3
116
Dede

Je commencerais par ajouter clearfix class au <div> avec panel-heading class. Ajoutez ensuite panel-title et pull-left à la balise H4. Ajoutez ensuite 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

169
OregonJeff

Je suis un peu en retard pour le jeu ici, mais la réponse simple est de déplacer le H4 APRÈS le bouton div. Il s'agit d'un problème courant lorsque vous flottez. Définissez toujours vos flottants AVANT le reste du contenu, sinon vous aurez ce problème de saut de ligne supplémentaire.

<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 sommet du flottant commence à la dernière position de l'élément immédiatement avant. Ainsi, si l'élément précédent revient à la ligne 3, votre float commencera également à la ligne 3.

Déplacer le flottant en haut de la liste élimine le problème car il n'y a aucun élément précédent à enfoncer et rien après le flottant sera affiché sur la ligne du haut (en supposant qu'il y ait de la place pour tous les éléments).

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

151
getsaf

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 sur l’en-tête. Ainsi, après avoir appliqué clearfix, il enfonce l’élément enfant, ce qui donne à l’en-tête div une plus grande hauteur.

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 12/22/2015 - ajouté .clearfix à l'entête div

41
andre3wap

J'ai placé le groupe de boutons à l'intérieur du titre, puis j'ai ajouté un correctif au 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>
10
Jonathan

Essayez de placer le btn-group à l'intérieur du H4 comme ceci.

<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

8
Zim

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

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

Maintenant, je n'ai plus besoin que d'ajouter un peu d'alignement vertical.

6
Dede

Dans ce cas, vous devez ajouter .clearfix à la fin du conteneur avec les é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

6
sargonpiraev

J'ai trouvé l'utilisation d'une classe supplémentaire sur l'aide de la rubrique .panel.

<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;
    }
}
1
Jon Joyce

ou ca? En utilisant la classe en 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>
0
Kanit P.

L'élément h4 est affiché sous forme de bloc. Ajoutez-y une bordure et vous verrez ce qui se passe. Si vous voulez placer quelque chose à droite, vous avez plusieurs options:

  1. Placez les éléments flottants avant l'élément block (h4).
  2. Flottez également l'élément h4.
  3. Affiche l'élément h4 en ligne.

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

Vous pouvez également vouloir ajouter la classe panel-title à l'élément h4 ou ajuster le remplissage sur celui-ci.

0
mrdeus