Inserimento di un pannello nel sistema di rete del bootstrap

Question

Ho un pannello bootstrap di base e voglio che sia largo 4 colonne. Ho provato ad aggiungere la classe col-sm-4 come mi farebbe con qualsiasi altro div:

<div class="row"> 
    <div class="panel panel-default col-sm-4"> 
    <div class="panel-heading">Panel heading without title</div> 
    <div class="panel-body"> 
     Panel content 
    </div> 
    </div> 
</div> 

Questo ha la larghezza corretta, ma ora lo sfondo barra del titolo è incasinato:

Come faccio a farlo conformarsi a quella larghezza, ma rendere ancora correttamente l'intestazione?

Answer 1

Anziché specificare il pannello per essere la larghezza di quattro colonne, che cosa se è stato inserito il pannello in una colonna di lunghezza-quattro? Non vedo da nessuna parte nella documentazione che dice che è possibile applicare la classe col-sm- * a un componente del pannello.

<div class="row"> 
    <div class="col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Panel Heading</div> 
     <div class="panel-body">Panel content</div> 
    </div> 
    </div> 
</div> 

E ricordate che le colonne dovrebbero aggiungere fino a 12. Quindi, se si voleva spazio vuoto a destra e sinistra del pannello si potrebbe fare qualcosa di simile:

<div class="row"> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Panel Heading</div> 
     <div class="panel-body">Panel content</div> 
    </div> 
    </div> 
    <div class="col-md-4"></div> 
</div> 

Update 1 : Sionide21 ha notato che la larghezza della colonna cambia in base alla presenza o meno di righe annidate. Vedi l'immagine qui sotto.

La riga superiore dell'immagine è ciò che accade quando il pannello è posizionato direttamente all'interno della colonna (vedere la prima riga sotto ... questo è lo stesso come il primo frammento di codice HTML di questo post). La metà inferiore è ciò che accade quando inserisci una riga annidata (vedi la seconda riga sotto).

<div class="row"> 
    <div class="col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Panel Heading</div> 
     <div class="panel-body">Panel content</div> 
    </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-4 bg-primary"><p>Left Column</p></div> 
    <div class="col-md-4"> 
    <div class="row"> 
     <div class="panel panel-default"> 
     <div class="panel-heading">Panel Heading</div> 
     <div class="panel-body">Panel content</div> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4 bg-primary"><p>Rightt Column</p></div> 
</div> 

Così sembra che quando il pannello è posizionato direttamente all'interno di una colonna, un certo margine viene aggiunto al pannello (o padding viene aggiunto alla colonna), mentre quando si posiziona il pannello in una fila nidificata, il margine (o imbottitura) viene eliminato. Non so se questo è di progettazione o solo una stranezza di Bootstrap.

Aggiornamento 2: koala_dev ha sottolineato che l'esempio di "riga nidificata" si comporta come è perché il pannello è figlio diretto di un elemento .row. Quindi, in sostanza, stiamo contrastando il riempimento della colonna con i margini negativi della riga. Non ne so abbastanza sull'argomento, ma lui dice che dovrebbe andare bene così com'è, oppure puoi creare CSS personalizzati per rimuovere il padding dal pannello, o addirittura provare ad aggiungere la classe .row al pannello stesso! Per esempio. <div class="panel panel-default row">.

Answer 2

Prova ad aggiungere width:100% al .panel-heading