bootstrap 3 gruppo di pulsanti nel pannello di intestazione non centraggio

Ho un gruppo di pulsanti in un pannello di intestazione. Li voglio galleggiare verso destra, ma quando lo faccio i pulsanti sono ora giù in fondo l’intestazione e ho bisogno di loro per essere centrato. Come faccio a fare questo?

ecco il codice 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>

e un violino esempio: http://jsfiddle.net/snowburnt/4ejuK/

Stranamente, nel mio linux in ambiente dev su chromium, gli stessi pulsanti sono posizionate correttamente, ma le icone al loro interno sono inferiori a quelli che dovrebbero essere, ho la sensazione che questa sarà una risposta a questi problemi.

InformationsquelleAutor Snowburnt | 2013-10-30

7 Replies
  1. 16
    1. Si dovrebbe aggiungere la classe pull-right al tuo .btn-group div, invece di specificare float:right.

    2. Quando si float di un elemento, perde il layout a blocco. Non sarà più “push down” nella parte inferiore del suo contenitore, poiché non dispone di altezza. Questo problema si può risolvere impostando overflow:hidden sul tuo .panel-heading per consentire di ridimensionare correttamente. Sarà necessario aggiungere superiore imbottitura per il .panel-heading e negativi in alto imbottitura per il .btn-group per ospitare l’altezza del .btn-group.

    Ho inforcato il tuo violino: http://jsfiddle.net/Dq5ge/

    Che fissa per il normale browser, ma il mio linux ha ancora le icone inferiore rispetto al centro…ETA, aggiunto nbsp intorno al pulsante e ha iniziato a lavorare a destra. Ottimo consiglio, però
    +1 per overflow:hidden

    InformationsquelleAutor glomad

  2. 2

    È necessario cancellare i carri allegorici. Ci sono molti metodi per questa, come la clearfix hack o utilizzando overflow: hidden. Che è quello che ho fatto nel tuo violino. http://jsfiddle.net/4ejuK/2/

    .panel-heading {
        overflow: hidden;
    }

    elementi padre crollerà se loro galleggiava bambini non vengono cancellati causando un sacco di imprevisti problemi di layout.

    InformationsquelleAutor Davidicus

  3. 1

    aggiungere

    .container{
     line-height:2.2;
    }

    lungo con quello che David ha suggerito sopra il testo veramente al centro verticalmente.
    controllare violino

    InformationsquelleAutor Surender

  4. 1

    Ho mescolato i 2 migliori soluzioni per una migliore vestibilità senza cambiare troppo le dimensioni o superiore di indice negativo:

    .panel-heading {
        overflow: hidden;
    }

    e l’utilizzo di:

    <div class="pull-right">

    qui sono l’esempio: Jsfiddle esempio

    InformationsquelleAutor forget_me_alice

  5. 0

    È possibile utilizzare un trucco 😉

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

    Buona fortuna – S. M. Mousavi

    InformationsquelleAutor S.M.Mousavi

  6. 0

    Ho risolto questo problema per me oggi. Tutti i apparentemente di lavoro suggerimenti che ho trovato coinvolto impostazione altezze di cose in pixel per abbinare i pulsanti, e che proprio non sta proprio con me. Ho voluto l’allineamento verticale e di essere indipendenti l’altezza effettiva del testo del pannello stesso.

    Se si guarda @ithcy‘s risposta, e jack la font-size, hai un problema (demo).

    Più googling ho fatto, mi sono convinta che CSS è vertical-align era quello che volevo, ma non è mai sembrato di fare quello che io penso si dovrebbe fare. Poi mi sono imbattuto in un articolo di Luigi Lazaris che meglio spiegato cosa vertical-align è,

    Il vertical-align proprietà può essere suddiviso in tre
    di facile comprensione seguente procedura:

    1. Si applica solo ai inline o inline-block elementi
    2. Colpisce il
      allineamento dell’elemento stesso, non il suo contenuto (ad eccezione di quando viene applicato
      per le celle della tabella)
    3. Quando è applicata alla cella di una tabella, l’allineamento
      riguarda il contenuto della cella, non la cella stessa

    e, cosa più importante è non:

    Comune malinteso circa vertical-align è che, quando è
    applicata ad un elemento, si farà tutti gli elementi al suo interno che
    elemento di cambiare la loro posizione verticale.

    Mia soluzione era quella di utilizzare i CSS formattazione della tabella (che è quello che vertical-align è, dopo tutto), invece di floats che Bootstrap fornisce con pull-left e pull-right. Si prende un po ‘ di markup il modo che ho (ingenuamente) fatto, ma ho ottenuto il risultato che volevo:

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

    Ho fatto un demo del modo in cui lo sto usando, sono sicuro che può essere migliorato.

    Io sono molto consapevole del fatto che la btn-group ha una tendenza ad avvolgere con questo metodo, che sembra terribile. Solo che non hanno le conoscenze o l’esperienza per risolvere il problema. Nel mio caso, ho bisogno solo di singoli pulsanti, non i gruppi, quindi funziona abbastanza bene per me.

    InformationsquelleAutor ruok

  7. 0

    È molto tardi, ma ho semplicemente risolvere con questo css:

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

    InformationsquelleAutor lolo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *