Più di 12 bootstrap colonne di scorrimento orizzontale

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

<span class="col-md-2" style="text-align: center;"><b>Field 1</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 2</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 3</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 4</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 5</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 6</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 7</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 8</b></span>

Volevo display 8 campi come accennato in precedenza in una riga. Ma dopo il campo 6, altri due campi sono venuta giù. C’è un modo per avere tutti e 8 i campi in linea con scorrimento orizzontale.

InformationsquelleAutor newbie | 2016-07-14



4 Replies
  1. 22

    Quattro prese con la griglia di Bootstrap

    1) 8 colonne

    È possibile utilizzare griglie nidificate. Senza tabelle o personalizzazioni. Per esempio:

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 1</b></div>
            <div class="col-md-6"><b>Field 2</b></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 3</b></div>
            <div class="col-md-6"><b>Field 4</b></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 5</b></div>
            <div class="col-md-6"><b>Field 6</b></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 7</b></div>
            <div class="col-md-6"><b>Field 8</b></div>
          </div>
        </div>
      </div>
    </div>

    2) Scorrere

    Aumentare la larghezza della riga principale, se si desidera aggiungere lo scorrimento orizzontale:

    CSS:

    @media (min-width: 992px) {
      .container-scroll {
        overflow-x: auto;
      }
      .container-scroll > .row {
        width: 133.33333333%; /* = 100% * 4/3 */
      }
    }

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    
    <div class="container-fluid container-scroll">
      <div class="row">
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 1</b></div>
            <div class="col-md-6"><b>Field 2</b></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 3</b></div>
            <div class="col-md-6"><b>Field 4</b></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 5</b></div>
            <div class="col-md-6"><b>Field 6</b></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 7</b></div>
            <div class="col-md-6"><b>Field 8</b></div>
          </div>
        </div>
      </div>
    </div>

    3) Varie numero di colonne

    Se ogni riga ha varie numero di colonne, ma il numero di colonne è noto in anticipo.

    In questo caso le righe possono essere diverse per la larghezza. Pertanto, è necessario impostare la larghezza delle colonne relative alla larghezza dello schermo, piuttosto che la larghezza della riga.

    1. utilizzare vw invece di %
    2. impostare la larghezza speciale per la riga se è più larga di 100vw

    CSS:

    @media (min-width: 992px) {
      .container-scroll {
        overflow-x: auto;
      }
      .container-scroll .columns-16 {
        width: 133.33333333vw;  /* = 100vw * 16/12 */
      }
      .container-scroll .columns-24 {
        width: 200vw;  /* = 100vw * 24/12 */
      }
      .container-scroll .col-md-2 {
        width: 16.66666667vw !important;
      }
    }
    
    .container-scroll > .row {
      margin-top: 24px;
    }
    .container-scroll > .row > .col-md-2 {
      font-weight: bold;
      text-align: center;
    }

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    
    <div class="container-fluid container-scroll">
      <div class="row columns-16">
        <div class="col-md-2">Field 1</div>
        <div class="col-md-2">Field 2</div>
        <div class="col-md-2">Field 3</div>
        <div class="col-md-2">Field 4</div>
        <div class="col-md-2">Field 5</div>
        <div class="col-md-2">Field 6</div>
        <div class="col-md-2">Field 7</div>
        <div class="col-md-2">Field 8</div>
      </div>
    </div>
      
    <div class="container-fluid container-scroll">
      <div class="row columns-24">
        <div class="col-md-2">Field 1</div>
        <div class="col-md-2">Field 2</div>
        <div class="col-md-2">Field 3</div>
        <div class="col-md-2">Field 4</div>
        <div class="col-md-2">Field 5</div>
        <div class="col-md-2">Field 6</div>
        <div class="col-md-2">Field 7</div>
        <div class="col-md-2">Field 8</div>
        <div class="col-md-2">Field 9</div>
        <div class="col-md-2">Field 10</div>
        <div class="col-md-2">Field 11</div>
        <div class="col-md-2">Field 12</div>
      </div>
    </div>
      
    <div class="container-fluid container-scroll">
      <div class="row">
        <div class="col-md-2">Field 1</div>
        <div class="col-md-2">Field 2</div>
        <div class="col-md-2">Field 3</div>
        <div class="col-md-2">Field 4</div>
      </div>
    </div>

    4) numero Sconosciuto di colonne

    Convertire le colonne inline-block, se non si conosce il numero di colonne di una riga.

    CSS:

    @media (min-width: 992px) {
      .container-scroll > .row {
        overflow-x: auto;
        white-space: nowrap;
      }
      .container-scroll > .row > .col-md-2 {
        display: inline-block;
        float: none;
      }
    }
    
    .container-scroll > .row {
      margin-top: 24px;
    }
    .container-scroll > .row > .col-md-2 {
      font-weight: bold;
      text-align: center;
    }

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    
    <div class="container-fluid container-scroll">
      <div class="row">
        <div class="col-md-2">Field 1</div>
        <div class="col-md-2">Field 2</div>
        <div class="col-md-2">Field 3</div>
        <div class="col-md-2">Field 4</div>
        <div class="col-md-2">Field 5</div>
        <div class="col-md-2">Field 6</div>
        <div class="col-md-2">Field 7</div>
        <div class="col-md-2">Field 8</div>
      </div>
    
      <div class="row">
        <div class="col-md-2">Field 1</div>
        <div class="col-md-2">Field 2</div>
        <div class="col-md-2">Field 3</div>
        <div class="col-md-2">Field 4</div>
        <div class="col-md-2">Field 5</div>
        <div class="col-md-2">Field 6</div>
        <div class="col-md-2">Field 7</div>
        <div class="col-md-2">Field 8</div>
        <div class="col-md-2">Field 9</div>
        <div class="col-md-2">Field 10</div>
        <div class="col-md-2">Field 11</div>
        <div class="col-md-2">Field 12</div>
      </div>
    
      <div class="row">
        <div class="col-md-2">Field 1</div>
        <div class="col-md-2">Field 2</div>
        <div class="col-md-2">Field 3</div>
        <div class="col-md-2">Field 4</div>
      </div>
    </div>

    • In realtà sto cercando il secondo approccio con scorrimento orizzontale che sto cercando di avere più il numero di colonne che è dinamico, come l’utente seleziona e devono essere visualizzati in tempo reale. Così scorrimento-approccio push me il problema di dover utente di selezionare più colonne senza disturbare i miei altri elementi dell’interfaccia utente e di visualizzare
    • Ho migliorato la mia risposta. Si prega di controllare due nuove soluzioni. Sono utili?
    • Wow! Questo è semplicemente stupenda!!! Conversione inline blocchi sarà la migliore soluzione di ogni riga può ora essere indipendente e di diverse dimensioni. Grazie per la soluzione di @Gleb Kemarsky
    • Felice di essere d’aiuto 🙂 ho semplificato HTML e CSS della quarta soluzione. Si prega di verificare come funziona.
    • Semplicemente bella.
  2. 1

    Per ottenere più colonne:

    Si può fare il vostro proprio Bootstrap variazione da qui: http://getbootstrap.com/customize/ in cui è possibile impostare il numero di colonne della griglia di layout usa così come praticamente ogni altra personalizzazione del CSS prima di scaricare, installare e quindi utilizzando questa (nuova) modello sul tuo sito web.

    Facile.

    O, se avete voglia di una sfida e hai un paio di ore per uccidere è possibile aprire il Bootstrap.css file e aggiungere manualmente nuovi elementi CSS e riallineare la width [percentuale] parametri per ogni definizione di colonna.

    Scorrevole in orizzontale tabelle

    L’intera premessa di bootstrap è non avere niente di overflow dello schermo, non importa cosa. Se in particolare fare desidera che le cose overflow quindi si non dovrebbe essere utilizzando bootstrap, o è necessario modificare manualmente alcune impostazioni nel file CSS, di nuovo, mi riferisco torna a http://getbootstrap.com/customize/ che potrebbe avere una soluzione, altrimenti si può esplorare il CSS e impostare alcuni parametri CSS nel bootstrap file di modello.

    Ci potrebbe essere un pre-definito di bootstrap tabella classe css è possibile utilizzare per queste cose, avete esaminato il Bootstrap, documentazione?

    O La ricerca per altre domande su Stack Overflow può dare alcune risposte utili per fare questa operazione manualmente.

  3. 0

    È possibile dividere bootstrap col-12 a 2. Ora avete a 24 colonne

        <div class "row">
          <div class="col-6">
            <div class "row">
              <div class="col-1">
                1
              </div>
              <div class="col-1">
                2
              </div>
              <div class="col-1">
                3
              </div>
              <div class="col-1">
                4
              </div>
              <div class="col-1">
                5
              </div>
              <div class="col-1">
                6
              </div>
              <div class="col-1">
                7
              </div>
              <div class="col-1">
                8
              </div>
              <div class="col-1">
                9
              </div>
              <div class="col-1">
                10
              </div>
              <div class="col-1">
                11
              </div>
              <div class="col-1">
                12
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class "row">
              <div class="col-1">
                13
              </div>
              <div class="col-1">
                14
              </div>
              <div class="col-1">
                15
              </div>
              <div class="col-1">
                16
              </div>
              <div class="col-1">
                17
              </div>
              <div class="col-1">
                18
              </div>
              <div class="col-1">
                19
              </div>
              <div class="col-1">
                20
              </div>
              <div class="col-1">
                21
              </div>
              <div class="col-1">
                22
              </div>
              <div class="col-1">
                23
              </div>
              <div class="col-1">
                24
              </div>
            </div>
          </div>
        </div>
  4. 0

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 1</b></div>
            <div class="col-md-6"><b>Field 2</b></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 3</b></div>
            <div class="col-md-6"><b>Field 4</b></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 5</b></div>
            <div class="col-md-6"><b>Field 6</b></div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row text-center">
            <div class="col-md-6"><b>Field 7</b></div>
            <div class="col-md-6"><b>Field 8</b></div>
          </div>
        </div>
      </div>
    </div>

Lascia un commento