Bootstrap 3-Tasten-Gruppe in Panel-Header nicht zentriert

Question

Ich habe eine Schaltfläche Gruppe in einem Panel-Header. Ich möchte, dass sie nach rechts schweben, aber wenn ich das tue, sind die Knöpfe jetzt unten am Kopf und ich brauche sie zentriert. Wie mache ich das?

hier ist der HTML:

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     Member of the following Units 
     <div class="btn-group btn-group-sm"> 
      <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button> 
      <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button> 
     </div> 
    </div> 
    <div class="panel-body"> 
     test 
    </div> 
    <div class="panel-footer"> 
     test 
    </div>  
</div> 

und eine Geige Beispiel: http://jsfiddle.net/snowburnt/4ejuK/

Merkwürdigerweise in meinem Linux-Entwickler-Umgebung auf Chrom, die Tasten selbst sind richtig zentriert, sondern in ihnen die Symbole niedriger als Sie sollten sein, ich habe das Gefühl, dass dies beides beantworten wird.

Answer 1

1. Sie sollten die Klasse pull-right auf Ihre .btn-Gruppe div statt eines festen Schwimmer hinzufügen: rechts.

2. Wenn Sie ein Element schweben, verliert es das Blocklayout. Es wird den Boden seines Behälters nicht mehr "nach unten drücken", da er keine Höhe hat. Sie können dies beheben, indem Sie overflow:hidden auf Ihrem .panel-heading setzen, damit es die Größe korrekt ändern kann. Sie haben Top-Polsterung an den .panel-heading und negative Top-Polsterung ergänzen die .btn-group die Höhe des .btn-group.

ich gegabelt Ihre Geige zu empfangen: http://jsfiddle.net/Dq5ge/

Answer 2

Sie müssen Ihre Floats löschen. Dafür gibt es viele Methoden wie den Clearfix-Hack oder den Überlauf: versteckt. Was ich in deiner Geige gemacht habe. http://jsfiddle.net/4ejuK/2/

.panel-heading { 
    overflow: hidden; 
} 

übergeordnete Elemente werden zusammenbrechen, wenn ihr schwebte Kinder eine Menge unerwarteter Layout verursacht Probleme nicht gelöscht werden.

Answer 3

hinzufügen

.container{ 
line-height:2.2; 
} 

zusammen mit dem, was David oben vorgeschlagen wird vertikal den Text wirklich in der Mitte zu haben. Check fiddle

Answer 4

Sie einen Trick dafür verwenden kann;)

... 
    Member of the following Units 
    <div class="btn-group btn-group-sm"> 
     <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button> 
     <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button> 
    </div> 
    <div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div> 
    ... 

Viel Glück - SM Mousavi

Answer 5

Ich habe dieses Problem heute für mich selbst gelöst. All of theseemingly-working Vorschläge Ich fand beteiligt Höhe der Dinge in Pixeln, um die Tasten anzupassen, und das war einfach nicht richtig mit mir sitzen. Ich wollte, dass die vertikale Ausrichtung unabhängig von der tatsächlichen Höhe des Feldtexts selbst ist.

Wenn Sie Blick auf @ithcy ‚s Antwort, und die font-size aufbocken, haben Sie ein Problem (demo).

Je mehr googeln ich, desto mehr wurde ich davon überzeugt, dass CSS vertical-align war was ich wollte, aber es schien nie zu tun, was ich denke, dass es tun sollte.Dann lief ich über an article by Louis Lazaris, die besser erklärt, was vertical-align ist,

Die vertical-align Eigenschaft gliedert sich in drei werden kann einfach zu verstehen Schritte:

1. Es gilt nur für inline oder inline-block Elemente
2. Es betrifft die Ausrichtung des Elements selbst, nicht seine Inhalte (außer wenn auf Tabellenzellen angewendet)
3. Wenn es um eine Tabellenzelle angewendet wird, wirkt sich die Ausrichtung den Zellinhalt, nicht in die Zelle selbst

und was noch wichtiger ist ist nicht:

Die weit verbreitetes Missverständnis etwa vertical-align ist das, wenn es auf ein Element angewendet wird, wird es alle Elemente in diesem Element chan machen ge vertikale Position.

Meine Lösung war CSS Tabellenformatierung zu verwenden (was vertical-align für ist, nachdem alle) anstelle des float s, dass Bootstrap mit pull-left und pull-right bietet. Es dauert ein wenig zusätzliche Markup wie ich (naiv) es tat, aber ich habe das Ergebnis, das ich wollte:

HTML

<div class="panel-heading table-style"> 
    <span class="panel-title">Member of...</span> 
    <div class="button-wrap"> 
    <div class="btn-group btn-group-sm"> 
     <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button> 
     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button> 
    </div> 
    </div> 
</div> 

CSS

.panel-heading.table-style { 
    display: table; 
    width: 100%; 
} 
.panel-heading.table-style .panel-title { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: left; 
} 
.panel-heading.table-style .button-wrap { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
} 

ich gemacht demo von der Art, wie ich es verwende, die ich bin sicher, dass verbessert werden kann.

Ich bin mir sehr bewusst, dass die btn-group eine Tendenz hat, mit dieser Methode zu umhüllen, die schrecklich aussieht. Ich habe einfach nicht das Wissen oder die Erfahrung, um es zu beheben. In meinem Anwendungsfall brauche ich nur einzelne Tasten, keine Gruppen, also funktioniert es gut genug für mich.

Answer 6

ich gemischt, um die 2 besten Lösungen in einem, für eine bessere Passform, ohne zu viel um die Größe zu ändern oder Top-negativen Index mit:

.panel-heading { 
    overflow: hidden; 
} 

und mit:

<div class="pull-right"> 

hier sind Sie das Beispiel: Jsfiddle example

Answer 7

Es ist sehr spät, aber ich löse einfach durch diese css:

.panel-heading h3, 
.panel-heading .btn-group 
{ 
    display:inline-block; 
}