Bootstrap 3 Panel Header mit Tasten falsche Position

Ich verwende Bootstrap 3 und möchte einige Schaltflächen in der Bedienfeldüberschrift oben rechts hinzufügen. Wenn Sie versuchen, sie hinzuzufügen, werden sie unterhalb der Titelgrundlinie angezeigt.

Code: http://bootply.com/82631

Was ist das fehlende CSS, das ich entweder zum Titel, zur Bedienfeldüberschrift oder zu den Schaltflächen hinzufügen sollte?

Ich würde damit beginnen clearfix, der <div>with- panel-headingKlasse eine Klasse hinzuzufügen . Fügen Sie dann beide panel-titleund pull-leftzum H4Tag hinzu. Fügen Sie dann padding-topnach Bedarf 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

Ich bin hier etwas spät dran, aber die einfache Antwort ist, den H4 NACH dem Button Div zu bewegen. Dies ist ein häufiges Problem beim Floating. Lassen Sie Ihre Floats immer VOR dem Rest des Inhalts definieren, da sonst das Problem eines zusätzlichen Zeilenumbruchs 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 sind, die Oberseite des Floats an der letzten Zeilenposition des Elements unmittelbar davor beginnt. Wenn also das vorherige Element in Zeile 3 eingeschlossen wird, beginnt Ihr Float auch in Zeile 3.

Wenn Sie den Float an den oberen Rand der Liste verschieben, wird das Problem behoben, da keine vorherigen Elemente vorhanden sind, um ihn nach unten zu drücken, und alles, was nach dem Float in der obersten Zeile gerendert wird (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

Sie sollten einen "Clearfix" anwenden, um das übergeordnete Element zu löschen. Als nächstes erstreckt sich das h4 für den Header-Titel über den gesamten Header. Nachdem Sie Clearfix angewendet haben, wird das untergeordnete Element nach unten gedrückt, wodurch das Header-Div eine größere Höhe hat.

Hier ist ein Fix, ersetzen Sie ihn 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 zur Überschrift div hinzugefügt

Ich habe die Schaltflächengruppe in den Titel eingefügt und dann unten einen Clearfix hinzugefügt.

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

Versuchen Sie, das btn-groupInnere H4so zu platzieren.

<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

Du bist ein Teil richtig. mit <b>title</b>ihm sieht gut aus , aber ich würde gerne verwenden <h4>.

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

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

In diesem Fall sollten Sie .clearfixam Ende des Containers schwebende Elemente hinzufügen .

<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

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

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

Das h4Element 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. Legen Sie die schwimmenden Gegenstände vor dem Blockelement (h4).
2. Schweben Sie auch das h4-Element.
3. Zeigen Sie das h4-Element inline an.

In beiden Fällen sollten Sie die clearfixKlasse zum Containerelement hinzufügen , um eine korrekte Auffüllung Ihrer Schaltflächen zu erhalten.

Möglicherweise möchten Sie die panel-titleKlasse auch dem h4-Element hinzufügen oder die Auffüllung anpassen.

oder dieses? Durch Verwendung 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>