wake-up-neo.net

Bootstrap 3 Panel Header mit Tasten falsche Position

Ich verwende Boostrap 3 und möchte eine Schaltfläche in der Leistenüberschrift oben rechts hinzufügen. Beim Versuch, sie hinzuzufügen, werden sie unterhalb der Titelbasislinie angezeigt.

Code: http://bootply.com/82631

Was sind die fehlenden CSS, die ich zu Titel, Bedienfeldüberschrift oder Schaltflächen hinzufügen sollte?

116
Dede

Ich würde damit beginnen, der Klasse <div> Mit der Klasse panel-heading Die Klasse clearfix hinzuzufügen. Fügen Sie dann sowohl panel-title Als auch pull-left Zum Tag H4 Hinzu. Fügen Sie dann nach Bedarf padding-top Hinzu.

Hier ist der vollständige Code:

<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

Ich bin ein bisschen zu spät zum Spiel hier, aber die einfache Antwort ist, den H4 NACH dem Knopf div zu bewegen. Dies ist ein häufiges Problem beim Floaten. Lassen Sie Ihre Floats immer VOR dem Rest des Inhalts definieren, da sonst ein zusätzliches Zeilenumbruchproblem auftritt.

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

Das Problem hierbei ist, dass, wenn Ihre Floats nach anderen Elementen definiert werden, die oberste Position des Floats an der letzten Zeilenposition des Elements unmittelbar davor beginnt. Wenn der vorherige Eintrag in Zeile 3 umgebrochen wird, beginnt Ihr Gleitkomma auch in Zeile 3.

Das Verschieben des Floats an den Anfang der Liste beseitigt das Problem, da keine vorherigen Elemente zum Herunterdrücken vorhanden sind und alle Elemente nach dem Rendern des Floats in der obersten Zeile angezeigt werden (vorausgesetzt, in der Zeile ist Platz für alle Elemente).

Beispiel für die richtige und falsche Reihenfolge und die Auswirkungen: http://www.bootply.com/HkDlNIKv9g

151
getsaf

Sie sollten einen "Clearfix" anwenden, um das übergeordnete Element zu löschen. Als Nächstes erstreckt sich das h4 für den Headertitel über den gesamten Header. Nachdem Sie clearfix angewendet haben, wird das untergeordnete Element nach unten gedrückt, wodurch das div des Headers eine größere Höhe aufweist.

Hier ist eine Lösung, ersetzen Sie sie einfach durch Ihren 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>

Bearbeitet am 22.12.2015 - .clearfix zu Überschrift div hinzugefügt

41
andre3wap

Ich platzierte die Schaltflächengruppe innerhalb des Titels und fügte dann unten einen Clearfix hinzu.

<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

Versuchen Sie das btn-group im H4 so was..

<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

Du hast recht. mit <b>title</b> sieht es gut aus, aber ich würde gerne <h4> verwenden.

Ich habe <h4 style="display: inline;"> Eingegeben und es scheint zu funktionieren.

Jetzt muss ich nur noch eine vertikale Ausrichtung hinzufügen.

6
Dede

In diesem Fall sollten Sie .clearfix am Ende des Containers mit schwimmenden Elementen.

<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

Ich habe festgestellt, dass die Verwendung einer zusätzlichen Klasse in der .panel-Überschrift hilft.

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

Und dann diesen weniger Code verwenden:

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

oder dieses? Mit der Zeilenklasse

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

Das h4 Element wird als Block angezeigt. Fügen Sie einen Rand hinzu und Sie werden sehen, was los ist. Wenn Sie etwas rechts davon schweben lassen möchten, haben Sie eine Reihe von Optionen:

  1. Platzieren Sie die schwebenden Elemente vor dem Block (h4) -Element.
  2. Schweben Sie auch das Element h4.
  3. Zeigen Sie das Element h4 inline an.

In beiden Fällen sollten Sie die Klasse clearfix zum Containerelement hinzufügen, um eine korrekte Polsterung für Ihre Schaltflächen zu erhalten.

Möglicherweise möchten Sie auch das panel-title Klasse für das Element h4 oder passen Sie die Polsterung an.

0
mrdeus