Il riempimento è supportato nel framework Bootstrap di Twitter?

Question

Non riesco a comprendere il framework Twittter Bootstrap. Permette l'imbottitura di base attorno ai contenitori?

Sembra esserci un margine predefinito di 20px a sinistra ma nessun riempimento. Qualcuno qui è riuscito a risolvere questo problema?

http://twitter.github.com/bootstrap/ 

Questo funziona bene se il vostro sfondo è bianco, ma il momento ho posto un colore dietro un contenitore, non ottengo alcuna imbottitura e se posso aggiungere imbottitura, le mie interruzioni di layout. Sto facendo qualcosa di sbagliato?

Answer 1

Ispirato stackoverflow.com/a/10779289

.light { 
    -moz-box-sizing: border-box; 
    background: url(/img/background.png); 
    padding: 1em; 
} 

Answer 2

È possibile overide il sitewidth nel file .less // sistema di Grid e la struttura della pagina

cioè se si desidera aggiungere 20px ad ogni lato del 940px (20px è l'impostazione predefinita gridGutterWidth) commento fuori:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

e scrivere:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1) + (@gridGutterWidth * 2));

annullare l'margin-left: -20px con una regola CSS:

.row {margin-left: 0;}

Ma se si utilizza le righe nidificate si avrà bisogno di aggiungere una classe solo per le file che si desidera far rientrare. Creare una regola:

.indent {margin-left: 0;}

Poi nel <div class="row"> aggiungere in una classe <div class="row indent">

Answer 3

Prendendo l'approccio di cui sopra e la sua applicazione al chilo sarebbe anche lavorare.

Aggiungere una classe denominata .is-imbottiti a campata che si desidera DiPAD (in questo caso) span4

<!-- Example row of columns --> 
    <div class="row"> 
    <div class="span4 is-padded"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
     <p><a class="btn" href="#">View details &raquo;</a></p> 
    </div> 
    </div> 

Quindi creare CSS (o meno) che riduce la larghezza della campata da parte applicata imbottitura, per esempio:

/* CSS example */ 
.span4.is-padded { 
    width: 280px; /* 300 - (10x2) */ 
    padding: 10px; 
    background: #CCC; /* just so you can see it */ 
} 

/* Less example */ 
.span4.is-padded { 
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth; 
    padding: @gridGutterWidth/2; 
    background: #CCC; /* just so you can see it */ 
} 

Questo può facilmente essere ripetuto per il resto della griglia

.is-padded { 
    padding: @gridGutterWidth/2; 
    background: #CCC; /* just so you can see it */ 
} 
.span1.is-padded { 
    width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - @gridGutterWidth; 
} 
.span2.is-padded { 
    width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - @gridGutterWidth; 
} 
.span3.is-padded { 
    width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - @gridGutterWidth; 
} 
.span4.is-padded { 
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth; 
} 
... etc 

I punti di interruzione nelle griglie reattive possono essere facilmente sostituiti anche utilizzando le query multimediali.

Tuttavia, questo approccio non funziona con le reti fluide.