Bootstrap 3 pannello di intestazione con pulsanti posizione sbagliata

117

Sto usando Bootstrap 3 e vorrei aggiungere alcuni pulsanti nell'intestazione del pannello, nell'angolo in alto a destra. Quando si tenta di aggiungerli, vengono visualizzati sotto la linea di base del titolo.

Codice: http://bootply.com/82631

Quali sono i CSS mancanti che dovrei aggiungere al titolo, all'intestazione del pannello o ai pulsanti?

css twitter-bootstrap twitter-bootstrap-3

— Dede
fonte

175

Comincerei aggiungendo la clearfixclasse alla classe <div>with panel-heading. Quindi, aggiungi sia panel-titlee pull-leftal H4tag. Quindi aggiungere padding-top, se necessario.

Ecco il codice completo:

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

Funziona, l'unico problema è che il Panel Header viene spostato in cima al div e il btn-group si allinea verticalmente

— Nuno Furtado

9

O semplicemente rimuovi il .panel-titledal <h4>e non avrai bisogno dell'imbottitura.

— caw

153

Sono un po 'in ritardo per il gioco qui, ma la semplice risposta è spostare l'H4 DOPO il pulsante div. Questo è un problema comune durante il flottante, assicurati che i tuoi float siano sempre definiti PRIMA del resto del contenuto o avrai quel problema di interruzione di riga aggiuntiva.

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

Il problema qui è che quando i tuoi float sono definiti dopo altri elementi, la parte superiore del float inizierà dall'ultima posizione di riga dell'elemento immediatamente prima di esso. Quindi, se l'elemento precedente va a capo alla riga 3, anche il tuo float inizierà alla riga 3.

Spostare il float in cima all'elenco elimina il problema perché non ci sono elementi precedenti per spingerlo verso il basso e qualsiasi cosa dopo il float verrà visualizzato nella riga superiore (supponendo che ci sia spazio sulla riga per tutti gli elementi)

Esempio di ordinamento corretto e errato e degli effetti: http://www.bootply.com/HkDlNIKv9g

— getsaf
fonte

Se non ti piace la dimensione h4 usa <h4> <small> Intestazione pannello </small> </h4>

— Luciano Marqueto

Non riesco a capire perché il mio pulsante non rientra nell'intestazione del pannello. Il pulsante viene premuto dal padding dell'intestazione del pannello e non aumenta l'altezza dell'intestazione del pannello. Che cosa sto facendo di sbagliato? (Modifica: apparentemente ciò era dovuto all'aggiunta di una classe a un h4 ... ma ancora ora l'intestazione è troppo alta.)

— Nate

1

Ho dovuto aggiungere clearfix all'intestazione del pannello e aggiungere il riempimento come nella risposta sopra. Puoi fare un campione / demo funzionante?

— Nate

2

Nate, ecco un esempio di ordinamento corretto e non corretto. bootply.com/HkDlNIKv9g

— getsaf

1

Penso che dovrebbe essere cambiata la classe btn-sm con btn-xs. Si adatta meglio

— IlGala

40

Dovresti applicare un "clearfix" per cancellare l'elemento genitore. La prossima cosa, h4 per il titolo dell'intestazione, si estende completamente attraverso l'intestazione, quindi dopo aver applicato clearfix, spingerà verso il basso l'elemento figlio facendo sì che il div dell'intestazione abbia un'altezza maggiore.

Ecco una soluzione, sostituiscila con il tuo codice.

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

Modificato il 22/12/2015 - aggiunto .clearfix all'intestazione div

— andre3wap
fonte

3

dovrebbe funzionare se aggiungi la classe clearfix all'intestazione del pannello invece di aggiungere un altro div vuoto

— escapedcat

10

Ho posizionato il gruppo di pulsanti all'interno del titolo, quindi ho aggiunto un clearfix in fondo.

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

1

più elegante: <div class = "panel-header clearfix">;)

— Marwen Trabelsi

8

Prova a mettere l' btn-groupinterno in H4questo modo ..

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

No, non è "una buona pratica", ma ha risposto alla domanda originale. Aggiorno la risposta secondo le migliori pratiche.

— Zim

6

Hai ragione in parte. con <b>title</b>sembra a posto, ma vorrei usare <h4>.

L'ho messo <h4 style="display: inline;">e sembra funzionare.

Ora, devo solo aggiungere un po 'di allineamento verticale.

— Dede
fonte

1

inline-blockè meglio.

— Dede

6

In questo caso dovresti aggiungere .clearfixalla fine del contenitore con elementi float.

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

1

Ho scoperto che l'utilizzo di una classe aggiuntiva sull'intestazione .panel aiuta.

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

E poi usando questo codice in meno:

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

— Jon Joyce
fonte

0

L' h4elemento viene visualizzato come un blocco. Aggiungi un bordo e vedrai cosa sta succedendo. Se vuoi far fluttuare qualcosa alla sua destra, hai una serie di opzioni:

Posiziona gli elementi flottanti prima dell'elemento block (h4).
Fai galleggiare anche l'elemento h4.
Visualizza l'elemento h4 in linea.

In entrambi i casi, dovresti aggiungere la clearfixclasse all'elemento contenitore per ottenere il riempimento corretto per i tuoi pulsanti.

Puoi anche aggiungere la panel-titleclasse o regolare il riempimento dell'elemento h4.

— mrdeus
fonte

0

o questo? Utilizzando la classe di riga

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