griglia bootstrap 3.0 con meno di 12 colonne

Sto provando a creare un calendario utilizzando la griglia con solo 7 colonne. Mi piacerebbe avere queste 7 colonne distanziate uniformemente e adattare l'intera riga. Attualmente, le 7 colonne non aggiungono fino a 12 e ottengo 12 colonne con 5 vuote. C'è un modo in Bootstrap 3 per ottenere tutti e 7 sparsi nella fila?griglia bootstrap 3.0 con meno di 12 colonne

fonte

2015-01-29 Dave

Potete per favore condividere ciò che hai provato fino ad ora? – scubaFun

Puoi creare una griglia a 7 colonne usando i griglie di griglia Less: https://github.com/twbs/bootstrap/blob/master/less/mixins/grid.less Alcuni documenti incompleti su come usarli: http://getbootstrap.com/css/#grid-less – cvrebert

Risposta breve: ~~non proprio~~ forse?

From Grid description:

Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

Il numero 12 è stato scelto per alta versatilità (si può avere: 1,2,3,4,6 o 12 colonne), ma c'è sempre qualche avvertimento a tali soluzioni: richiedono una certa conformità ai suoi standard.

Ora, cosa succede quando crei 7 div in questo modo: <div class="col-md-1">? Ho fatto un test rapido e, ho 7 colonne. Naturalmente prendono solo 7/12 della larghezza del mio contenitore - quindi se è accettabile, allora puoi rotolare con esso.

In caso contrario, potrete sia necessario usare la propria soluzione (sia sfruttando le classi bootstrap esistenti o iniziare da vuoto), modificare bootstrap (possibile, ma mi piacerebbe che sconsiglia la perché crea problemi per il futuro manutenibilità), o cambia il tuo design. O forse basta usare qualche altro componente/modello?

fonte

2015-01-29 14:00:59 Gerino

La soluzione migliore è probabilmente creare la propria classe di colonne personalizzate. Dal momento che vuoi una colonna che occupa 1/7 della larghezza del genitore, usa width:14.285%; (100 diviso per 7 = 14.285 ...).

DEMO: http://www.bootply.com/uakh14tkuX

CSS

.col-day{ 
    width:14.285%; 
    border:1px solid grey; 
    float:left; 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
    }

HTML

<div class="container"> 
    <div class="row bg-success"> 
    <div class="col-day">Sun</div> 
    <div class="col-day">Mon</div> 
    <div class="col-day">Tue</div> 
    <div class="col-day">Wed</div> 
    <div class="col-day">Th</div> 
    <div class="col-day">Fr</div> 
    <div class="col-day">Sat</div> 
    <div class="col-day">Sun</div> 
    <div class="col-day">Mon</div> 
    <div class="col-day">Tue</div> 
    <div class="col-day">Wed</div> 
    <div class="col-day">Th</div> 
    <div class="col-day">Fr</div> 
    <div class="col-day">Sat</div> 
    </div> 
</div>

Nella sezione CSS, galleggiante, posizione, min-altezza e le imbottiture sono le stesse di qualsiasi altra col bootstrap -classe. Larghezza e bordo sono gli unici aspetti veramente personalizzati. Ma vorrete anche considerare cosa succede su dispositivi di dimensioni diverse - questa soluzione NON è reattiva nel modo in cui le col-classi combinate sono ...

fonte

2015-01-30 07:04:42

Perché non raddoppiare da 7 a 14? È molto più semplice tenerlo un numero pari. In questo modo puoi creare un layout che sembra aggiungere fino a 7 colonne. Quindi, ad esempio, se si desidera un layout col-3 e col-4, si farebbe semplicemente col-6 e col-8. Per un calendario, ciò significherebbe che ogni giorno otterrebbe una classe col-2.

Verificate anche https://github.com/zirafa/bootstrap-grid-only che potrebbe essere più facile da capire rispetto mixins di Bootstrap, anche se si può sempre e solo andare alla Bootstrap personalizzare la pagina e inserire il numero di colonne desiderato: http://getbootstrap.com/customize/

fonte

2015-02-23 21:01:17 burrbrown

griglia bootstrap 3.0 con meno di 12 colonne

risposta

Problemi correlati