La griglia di Bootstrap 3 di Twitter, che modifica il punto di interruzione e rimuove il riempimento

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 a 768px il padding è all’interno del contenitore, quindi l’aspetto è diverso perché il contenuto non è più allineato con un contenitore che potrebbe essere sopra.
  3. quando la griglia impila il padding rimane ma per me dovrebbe essere a 0.

Qualsiasi aiuto sarebbe gradito Sto usando il codice qui sotto con bootstrap 3 RC1

container

aggiornamento gennaio 2014

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

aggiornamento 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 risposta precedente uso questa tabella dai documenti recenti:

[vecchia immagine rimossa]

Quando provo questi valori se trovo qualcosa di diverso:

Bootstrap 3 Grid

  • “col-xs- *” sarà applicato sempre (mai stack)
  • “col-sm- *” sarà applicato tra 768 e superiore (992px) (stack a 767)
  • “col-lg- *” sarà applicato tra 992 e più alto (stack a 991)

In variables.less troverai:

 // 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 esserci un breakpoint a 480px (o come @fred_ dice che alla griglia manca l’insieme di classi col-ts- * (da piccolo a piccolo)). Vedi anche: https://github.com/twbs/bootstrap/issues/9746

Per impostare il punto di impilamento a 480px dovrai ricompilare il tuo css. Imposta @ screen-small a 480px; e definisci i tuoi cols con:

dopo quello. Nota che questo cambierà @ grid-float-breakpoint anche perché è definito come @grid-float-breakpoint: @screen-tablet; .

Quando aggiungo una riga al contenitore non trovo problemi con il padding.

Oppure prova: http://www.bootply.com/70212 si impilerà sotto 480px aggiungendo una query multimediale (il javascript è usato solo per illustrazione)

risposta precedente

Da ora il Bootstrap di Twitter definisce tre griglie: una piccola griglia per i telefoni (<480px), una piccola griglia per i tablet (<768px) e una 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 tuo prefisso “col-4” la griglia non si impilerà mai. Quindi rimuovi “col-4” per lasciare la tua griglia sotto il 480px. Questo rimuoverà anche la causa del riempimento è ora stack.

Vedi anche: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ e Scrivere Bootstrap di Twitter con l’aggiornamento a v3 in mente

  1. Usa la class .col-ts-12 per tutti i 100% divs sotto 480px e metti questo codice alla fine di bootstrap.css:

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

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

Per esempio:

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

Non sono abbastanza sicuro di cosa stia cercando di ottenere con questo, ma questo è il modo in cui applicheresti stili in cui la larghezza dello schermo è inferiore a 480px.