Bootstrap 3 Panel Header mit Tasten falsche Position

117

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?

css twitter-bootstrap twitter-bootstrap-3

— Dede
quelle

175

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

— OregonJeff
quelle

Dies funktioniert, das einzige Problem ist, dass der Panel-Header an die Spitze des Div gezogen wird und die BTN-Gruppe vertikal ausgerichtet wird

— Nuno Furtado

9

Oder entfernen Sie einfach die .panel-titleaus <h4>und Sie brauchen die Polsterung nicht.

— Caw

153

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

— getaf
quelle

Wenn Sie die Größe h4 nicht mögen, verwenden Sie <h4> <small> Panel-Header </ small> </ h4>

— Luciano Marqueto

Ich kann nicht herausfinden, warum meine Schaltfläche nicht in die Bedienfeldüberschrift passt. Die Taste wird durch die Polsterung der Bedienfeldüberschrift nach unten gedrückt und erhöht die Höhe der Bedienfeldüberschrift nicht. Was mache ich falsch? (Bearbeiten: anscheinend war das, weil eine Klasse zu einem h4 hinzugefügt wurde ... aber jetzt ist die Überschrift noch zu groß.)

— Nate

1

Ich musste der Panel-Überschrift Clearfix hinzufügen und die Polsterung wie in der obigen Antwort hinzufügen. Können Sie ein funktionierendes Beispiel / eine Demo erstellen?

— Nate

2

Nate, hier ist ein Beispiel für die richtige oder falsche Reihenfolge. bootply.com/HkDlNIKv9g

— getsaf

1

Ich denke, das sollte die Klasse btn-sm mit btn-xs geändert werden. Es passt besser

— IlGala

40

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

— andre3wap
quelle

3

sollte funktionieren, wenn Sie die Clearfix-Klasse zur Panel-Überschrift hinzufügen, anstatt ein weiteres leeres div

— hinzuzufügen

10

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>

— Jonathan
quelle

1

eleganter: <div class = "panel-Heading Clearfix">;)

— Marwen Trabelsi

8

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

— Zim
quelle

Nein, es ist keine "gute Praxis", aber es hat die ursprüngliche Frage beantwortet. Ich aktualisiere die Antwort gemäß den Best Practices.

— Zim

6

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.

— Dede
quelle

1

inline-blockist besser.

— Dede

6

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

— sargonpiraev
quelle

1

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

— Jon Joyce
quelle

0

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:

Legen Sie die schwimmenden Gegenstände vor dem Blockelement (h4).
Schweben Sie auch das h4-Element.
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.

— mrdeus
quelle

0

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>

— Kanit P.
quelle