Centrare i DIV con Bootstrap

[laulod23]

Ciao a tutti!
sto utilizzando dreamweaver (HTML5 e CSS3), e ho creato 3 DIV all'interno di un contenitore fluido, nella modalità bootstrap.

Sono alle prime armi

Non ho utilizzato la griglia dato che quando provo ad inserire tre colonne continuava a mettermi 3 righe!


Io vorrei centrare i tre DIV in modo tale che modificando a larghezza dello schermo, questi restino sempre in centro e vadano a capo quando le dimensioni sono molto piccole (come telefono).

Inoltre vorrei sapere se posso fare in modo anche che 3 div restino fissi alla destra dello schermo.

Grazie!!

[m4rko80]

Ciao, usando correttamente la griglia non dovresti avere questi problemi. Se crei 3 colonne con ad esempio la classe col-lg-4 dovresti per forza di cose avere tre colonne. Se vanno a capo i 3 blocchi probabilmente avrai messo dei div in più per generare le "righe".
L'unico modo per gestire la cosa con bootstrap è utilizzare le sue classi, se non hai usato la griglia e intendi dire che non hai appunto usato il css nativo, l'unica soluzione è vedersela col CSS.
Posta se mai la tua griglia per vedere com'è fatta.

<div class="col-xs-12 col-sm-12">
<div class="col-xs-12 col-sm-4"> 1 terzo</div>
<div class="col-xs-12 col-sm-4"> 1 terzo</div>
<div class="col-xs-12 col-sm-4"> 1 terzo</div>
</div>

Questo se non ho capito male dovrebbe fare quello che stai cercando di fare

[laulod23]

Grazie. Allora forse sto iniziando un po' a capire come funziona la griglia, io non ho creato una griglia ma un contenitore fluido con dentro dei div.

Io dovrei praticamente creare 7 rettangoli che fungono da Pulsanti: questi devono essere tipo divisi su 2 righe quando si guarda il sito da pc, e man mano andare a capo quando lo schermo si rimpicciolisce. il mio problema è che nella prima riga ho 4 div e nella seconda 3, e quei 3 sono spostati tutti sulla sinistra.

come posso fare? faccio 4 e 3 colonne.. ma poi quando stringo lo schermo cosa succede?
dovrebbero diventare 3 - 3 - 1 e poi 2 - 2 -2 -1

Grazie

[m4rko80]

Se usi le griglie di bootstrap( e quindi le sue classi) non devi scrivere altro css, basta capire bene come funzionano.
QUI c'è spiegato come funzionano le classi . Sostanzialmente bootstrap divide il template con un massino di 12 colonne.
Quindi se volessi 3 colonne sarebbero 12/3 = 4 (col-lg-4) , semplice.

Le classi per le colonne hanno lo stesso nome a parte la parte centrale che definisce la media query:

col-*-*   
col-(xs sm md lg)-(da 1 a 12)

La modalità più piccola come device è xs e a salire sm , md, lg (nella guida c'è speigato il salto css media query).

Se tu sai di avere 7 bottoni fissi, puoi usare queste classi per capire come spostare i div in base alle dimensioni schermo combinando le classi tipo:

<div class="col-xs-12 col-sm-12" id="test">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 1 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 2 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 3 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 4 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-lg-push-2"> 5 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-lg-push-2"> 6 </div>
<div class="col-xs-12 col-sm-6 col-sm-push-3 col-md-4 col-md-push-4 col-lg-3 col-lg-push-2"> 7 </div>
</div>

e così via.
In questo modo avrai bene o male quanto descritto

[laulod23]

okok grazie mille! penso di aver capito!

[cassano]

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 1 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 2 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 3 </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 4 </div>

Se non erro con "col-md-4" vengono fuori tre colonne e una a capo

[laulod23]

Se non erro con "col-md-4" vengono fuori tre colonne e una a capo

Grazie, sono riuscita a farcela e non ho potuto provare il tuo codice, ma comunque grazie! se dovrò rifare colonne lo proverò!

[lucavizzi]

<div class="row">
    <div class="col-xs-12 col-sm-4"> 1 terzo</div>
    <div class="col-xs-12 col-sm-4"> 1 terzo</div>
    <div class="col-xs-12 col-sm-4"> 1 terzo</div>
</div>

Piccolo fix.
Nota la classe "row" come wrapper principale