Come eseguire il padding su una riga fluida nel bootstrap di Twitter

Question

<div class="internal-wrapper row-fluid"> 
     <div class="Header span12"> 
       <div class="HeaderTitle span6"></div> 
       <div class="span6"></div> 
     </div> 
</div> 

Ora, quando eseguo il padding su wrapper interno, mi aspetto che il padding abbia effetto sull'intera griglia! dentro. Ma un overflow è in corso (credo, l'imbottitura giusta non sta funzionando)

.internal-wrapper { 
    padding-left: 30px; 
    padding-right: 30px; 
} 

La barra blu sotto rappresenta Header classe. La scatola verde, rappresenta il riempimento! Quindi, sta accadendo a sinistra ma non a destra

Answer 1

.row-fluid è al 100% di larghezza. Dato che sta usando un layout border-box, qualsiasi padding inserito viene aggiunto a quel 100%. Vedi http://paulirish.com/2012/box-sizing-border-box-ftw/. Tuttavia, impostandolo per utilizzare il modello della casella di contenuto probabilmente causerà altri problemi in Bootstrap.

Come aggiustarlo - aggiungere un elemento interno con l'imbottitura.

<div class="row-fluid"> 
    <div style="padding-left: 30px; padding-right: 30px;"> 
    ... 
    </div> 
</div> 

Answer 2

Non riesco a vedere (o discernere) dal tuo post cosa c'è che non va, ma ecco la mia ipotesi: posizionando il riempimento su un elemento di dimensioni Bootstrap, hai modificato la sua larghezza. Prova a mettere il margine su. Header invece.

Se questo non risolve il problema, si prega di creare un demo: http://jsfiddle.net/