imbottitura in bootstrap

Question

Im usando bootstrap:

<div id="main" class="container" role="main"> 
<div class="row"> 
    <div class="span6"> 
     <h2>Welcome</h2> 
     <p>Hello and welcome to my website.</p> 
    </div> 
    <div class="span6"> 
     Image Here (TODO) 
    </div> 
</div> 

principale ha anche uno sfondo grigio. Lo sfondo della pagina è bianco. Il problema che sto avendo è che il testo è giusto fino al bordo dello sfondo grigio. Voglio un po 'di padding, ma quando lo aggiungo, l'estensione dell'immagine va alla riga successiva.

Qualche idea su dove sto andando male?

Answer 1

Non ho usato Bootstrap ma ho lavorato su Zurb Foundation. Su quello ero solito aggiungere spazio come questo.

<div id="main" class="container" role="main"> 
    <div class="row"> 

     <div class="span5 offset1"> 
      <h2>Welcome</h2> 
      <p>Hello and welcome to my website.</p> 
     </div> 
     <div class="span6"> 
      Image Here (TODO) 
     </div> 
    </div> 

Visita questo link: http://getbootstrap.com/2.3.2/scaffolding.html e leggere la sezione: Compensazione colonne.

Penso di sapere cosa stai facendo male. Se si sta applicando imbottitura al span6 in questo modo:

<div class="span6" style="padding-left:5px;"> 
    <h2>Welcome</h2> 
    <p>Hello and welcome to my website.</p> 
</div> 

E 'sbagliato. Quello che devi fare è aggiungere imbottitura per gli elementi all'interno:

<div class="span6"> 
    <h2 style="padding-left:5px;">Welcome</h2> 
    <p style="padding-left:5px;">Hello and welcome to my website.</p> 
</div> 

Answer 2

Il suggerimento da @Dawood è buono se che funziona per voi.

Se avete bisogno di più messa a punto di questo, una possibilità è quella di utilizzare imbottiture sugli elementi di testo, ecco un esempio: http://jsfiddle.net/panchroma/FtBwe/

CSS

p, h2 { 
    padding-left:10px; 
} 

Answer 3

ci sono imbottiture costruiti in varie classi.

Ad esempio:

Un asp.net moduli web app:

<asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" /> 

questo codice di cui sopra avrebbe posto il testo della "Mostra Cancellato" troppo vicino alla casella di controllo per quello che vedo al bello guarda a.

Tuttavia, con bootstrap

<div class="checkbox-inline"> 
    <asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" /> 
</div> 

questo ha creato lo spazio, se non si desidera che il testo in grassetto, che class = casella di controllo

Bootstrap è molto flessibile, quindi in questo caso non mi ho bisogno di un trucco, ma a volte è necessario.