Se ho capito la tua domanda e penso che si dovrebbe usare:
<div class="row"> <div class="col-span-6 col-small-span-6″>6</div> <div class="col-span-6 col-small-span-6″>6</div> </div>
Dove
col-span-6
è la classe per la griglia di grandi dimensioni e
col-small-span-6
per la piccola griglia. Se lasci il numero
col-small-span-6
, il div si impilerà. La piccola griglia non utilizza le classi
col-span-*
.
Consulta anche: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/
Da ora di Twitter Bootstrap definisce tre griglie: griglia piccolo per i telefoni (< 480px), Piccola griglia per compresse (< 768px) e il medio-grande griglia per Destkops (> 768px) . I prefissi delle classi di riga per queste griglie sono ".col-", ".col-sm-" e ".col-lg-". La griglia di dimensioni medio-grandi si impilerà sotto la larghezza dello schermo di 768 pixel. Così fa la griglia piccola sotto 480 pixel e la piccola griglia non si impila mai.
Così il vostro html dovrebbe essere:
<div class="row">
<div class="col-6 col-lg-6 col-sm-6">6</div>
<div class="col-6 col-lg-6 col-sm-6">6</div>
</div>
MENO
L'ultima versione:
https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip non contiene una funzione .make a piccole colonne più.
Vedere anche: https://github.com/twbs/bootstrap/pull/8302 .make-column() aggiungerà una query multimediale per min-larghezza: @ griglia-float-breakpoint così sulla griglia piccola le colonne si impilano sempre utilizzando questa funzione.
Si potrebbe provare:
// Generate the small columns
.make-small-column(@columns) {
position: relative;
float: left;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width/2);
padding-right: (@grid-gutter-width/2);
@max : (@grid-float-breakpoint - 1);
// Calculate width based on number of columns available
@media (max-width: @max) {
width: percentage((@columns/@grid-columns));
}
}
.wrapper { .make-row(); }
.left { .make-column(6); .make-small-column(6);}
.right { .make-column(6); .make-small-column(6);}
UPDATE
La risposta di cui sopra sarà basato sulle release candidate di Twitter Bootstrap 3. La versione finale di Twitter Bootstrap 3 dispone di 4 griglia extra small (xs), small (sm), medium (md) e large (lg). Anche il codice Less è stato modificato in base a queste griglie. Quindi utilizzare il .make- {x} -column mixins come descritto da @gravy nella sua risposta: https://stackoverflow.com/a/18667955/1596547
fonte
2013-06-25 21:45:11
Questa risposta utilizza le mixins forniti da Bootstrap che è buono. Sarei cauto nel mettere sullo stesso elemento '.container' e' .make-row' anche se hanno margini diversi (margini automatici per container e margini negativi di metà della dimensione della grondaia per le righe). Pertanto, le tue righe dovrebbero essere collocate all'interno di qualsiasi contenitore. – rmarscher