Griglia di Bootstrap 3 di Twitter, modifica del punto di interruzione e rimozione del riempimento

Question

Sto cercando di passare alla nuova griglia di boostrap 3 e sto affrontando alcune difficoltà.

1. Come avere la griglia per impilare sotto 480px ma non tra 480px e 768px?
2. sopra 768px il padding a sinistra del primo e il padding a destra dell'ultimo sono all'esterno del contenitore, ma sotto 768px il padding si trova all'interno del contenitore in modo che l'aspetto sia diverso perché il contenuto non è più allineato con un contenitore che potrebbe essere sopra.
3. quando la griglia pila l'imbottitura rimanere ma per me dovrebbe essere a 0.

Qualsiasi aiuto sarebbe gradito I m usando il codice seguente con il bootstrap 3 RC1

<div class="container" style="background-color: purple;"> 
container 

</div> 

<div class="container"> 
    <div class="row"> 
     <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div> 
     <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div> 
     <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div> 
    </div> 
</div> 

Answer 1

aggiornamento gennaio 2014

Consulta anche: https://github.com/twbs/bootstrap/issues/10203

update 21 ago 2013 Da Twitter Bootstrap 3 RC2 il col- * menzionato sotto è stato rinominato xs-col- * Ora ci sono quattro classi di griglia: xs-col- * (mobile, mai stack), col-sm - * (tablet, stack sotto 768px), col-md- * (laptop, stack sotto 992 px) e col-lg- * (desktop, stack sotto 1200px).

aggiornamento Nella mia precedente risposta io uso questa tabella dai recenti documenti:

[vecchia immagine rimosso]

quando prova questi valori se trovato qualcosa di diverso:

• "col-xs- *" wil Vengo applicato sempre (mai stack)
• "col-sm- *" verrà applicato tra 768 e superiore (992px) (stack a 767)
• "col-lg- *" verrà applicato tra 992 e versioni successive (pile a 991)

In variables.less troverete:

// Media queries breakpoints 
// -------------------------------------------------- 

// Tiny screen/phone 
@screen-tiny:    480px; 
@screen-phone:    @screen-tiny; 

// Small screen/tablet 
@screen-small:    768px; 
@screen-tablet:    @screen-small; 

// Medium screen/desktop 
@screen-medium:    992px; 
@screen-desktop:    @screen-medium; 

Ma non sembra essere un punto di interruzione 480px (o come dice il @fred_ griglia viene manca il col- ts- * (da piccolo a piccolo) insieme di classi). Vedi anche: https://github.com/twbs/bootstrap/issues/9746

Per impostare il punto di impilamento a 480px, è necessario ricompilare il proprio css. Imposta @ screen-small a 480px; e definisci le tue colonne con: <div style="background-color: red" class="col-sm-4"> dopo. Nota questo cambierà @ griglia-float-punto di interruzione anche perché è definito come @grid-float-breakpoint: @screen-tablet;.

Quando si aggiunge una riga al contenitore non si riscontrano problemi con il riempimento.

Oppure provare: http://www.bootply.com/70212 che verrà stack sotto 480px con l'aggiunta di una media query (il javascript è utilizzato solo per l'illustrazione)

risposta precedente

Da ora di Twitter Bootstrap definisce tre griglie: griglia di Tiny Telefoni (< 480px), Piccola griglia per tablet (< 768px) e la griglia di dimensioni medio-grandi 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.

Con il prefisso "col-4" la griglia non si impila mai. Quindi rimuovi "col-4" per lasciare la tua griglia sotto il 480px. Questo rimuoverà anche la causa del riempimento è ora stack.

Consulta anche: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ e Writing Twitter's Bootstrap with upgrading to v3 in mind

Answer 2

1. Usa classe .col-ts-12 per tutti al 100% divs sotto 480px e inserire questo codice alla fine del bootstrap.css:

   @media (max-width: 480px) { .col-ts-12 { float: none; } }

Answer 3

Per implementare qualsiasi modifica per dispositivi piccoli-piccoli è necessario includere le proprie query multimediali per aggiungere i propri breakpoint aggiuntivi.

Ad esempio:

@media (max-width: 480px) { 
    .no-float { 
     display:block; 
     float:none; 
     padding:0; 
    } 
} 

io non sono abbastanza sicuro di quello che si sta cercando di raggiungere con questo, ma questo è come si dovrebbe applicare gli stili in cui la larghezza dello schermo è inferiore a 480px.