2013-08-11 9 views
7

Credo che per fornire standard margin-left possiamo usare la classe "Offset" nel bootstrap. Allo stesso tempo, qual è la classe che può essere utilizzata per fornire margini standard-giusto? esempio:Bootstrap: classe per margine-destra?

<div class="row-fluid"> 
    <div class="offset2 span8"></div> 
</div> 

per qualche ragione ho bisogno di dare equivalente margin-right a Offset2. Qualche soluzione sarà di grande aiuto. Grazie.

+0

Ho il sospetto è del tutto superfluo. Il tuo esempio mostra perché. –

+2

Nota a margine, dovresti usare la classe span-x e il tuo offset (ad esempio class = "span8 offset2"). –

risposta

10

Non esiste una classe equivalente a offset-x per margin-right e per una buona ragione, non è necessaria. Pensate in questo modo, se avete bisogno di un div 6 colonna che viene compensata sia a destra che a sinistra 3 colonne, si può usare:

<div class="row"> 
    <div class="span6 offset3">Your content...</div> 
</div> 

Inoltre, se si dispone di un div 6 colonna che deve essere compensato solo 2 colonne MA, l'offset dovrebbe essere di 2 colonne sulla destra, il codice sarebbe:

<div class="row"> 
    <div class="span6 offset4">Your content...</div> 
</div> 

Tenete a mente che si sta sempre lavorando in 12 colonne (a meno che cambiamenti nella variables.less) in modo da poter usare arco-x AND offset-x per raggiungere la posizione desiderata. Se stai cercando di modificare i pixel aggiuntivi, aggiungi una classe (o ID) aggiuntiva al tuo contenitore di contenuti all'interno della tua estensione. Per esempio:

<div class="row"> 
    <div class="span6 offset4"> 
     <div class="tweaked-margin">Your content...</div> 
    </div> 
</div> 

Il CSS:

.tweaked-margin { 
    margin-right: 4px; // or whatever you need 
} 
+0

Mentre sto leggendo mi viene in mente un'altra domanda. Io uso per scrivere {width: 960px; Margine \t: 0 auto;} per mantenere il contenuto sempre al centro. Se scrivo qualcosa come

My entire content
, se questo sarà il codice equivalente per mantenere i miei contenuti sempre al centro in pagine reattive-fluid lasciando uno spazio uguale sia a sinistra che a destra del contenuto? Grazie per il tempo che ci hai dedicato. È di grande aiuto –

+1

Sì, è esattamente corretto. Inoltre, nessuna larghezza di impostazione in px, pensa in percentuale. Se hai bisogno di un controllo un po 'più, usa max/min-width (o altezze per quella materia). Questo è accettabile in quanto il supporto del browser risale a IE8. Inoltre, se voglio centrare elementi, diciamo un pulsante, piuttosto che aggiungere un margine: 0 auto all'elemento stesso, di solito lo avvolgo in un contenitore a livello di blocco e applico text-align: center; ad esso. Pensa in questo modo; per prima cosa imposta il tuo posizionamento con la griglia, usando span-x e offset come necessario per tutto il posizionamento principale, quindi regola da lì. –

+2

Questo non funzionerà sul display mobile, poiché dopo una determinata larghezza del dispositivo, ogni intervallo viene convertito in span12. –

Problemi correlati