Più di 12 colonne di bootstrap con una scroll orizzontale

Sto cercando di creare una tabella usando il sistema di griglia bootstrap. So che dovremmo usare solo 12 colonne per riga. Ma volevo avere più di 12 colonne con una scroll orizzontale per l’intera tabella. Quindi sto provando con il seguente frammento di codice

Field 1 Field 2 Field 3 Field 4 Field 5 Field 6 Field 7 Field 8 

Volevo visualizzare 8 campi come sopra menzionato in una riga. Ma dopo il campo 6, altri due campi stanno scendendo. C’è un modo per avere tutti e 8 i campi in una sola riga con scorrimento orizzontale.

Quattro trucchi con la griglia Bootstrap

1) 8 colonne

Puoi usare griglie annidate. Senza tabelle o personalizzazioni. Per esempio:

  
Field 1
Field 2
Field 3
Field 4
Field 5
Field 6
Field 7
Field 8

Per ottenere più colonne:

Puoi creare la tua variazione Bootstrap da qui: http://getbootstrap.com/customize/ dove puoi impostare il numero di colonne utilizzate dal layout della griglia e praticamente qualsiasi altra personalizzazione del CSS prima di scaricare, installare e poi usare questo (nuovo) modello sul tuo sito web.

Facile.

Oppure, se hai voglia di una sfida e hai un paio d’ore per uccidere puoi aprire il file Bootstrap.css e aggiungere manualmente nuovi elementi CSS e riallineare i parametri di [percentuale] della width per ogni definizione di colonna.

Tavoli a scorrimento orizzontale

L’intera premessa del bootstrap è di non avere nulla traboccare dallo schermo, non importa quale. Se in particolare vuoi che le cose vadano in overflow, o non dovresti usare il bootstrap o dovrai modificare manualmente alcune impostazioni nel CSS, di nuovo ti rimando a http://getbootstrap.com/customize/ che potrebbe avere una soluzione, altrimenti puoi esplorare il CSS e impostare alcuni parametri CSS nel file del modello di bootstrap.

Potrebbe esserci una tabella css di bootstrap predefinita che puoi usare per queste cose, hai esplorato la documentazione di Bootstrap ?

Oppure la ricerca di altre domande su Stack Overflow può darti alcune risposte utili per farlo manualmente.

Puoi dividere bootstrap col-12 in 2. Hai ora 24 colonne

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  
Field 1
Field 2
Field 3
Field 4
Field 5
Field 6
Field 7
Field 8