Perché il mio col-lg- non è mostrato a tutta larghezza?

Dopo essermi aiutato con l’ allineamento dei miei controlli, sto cercando di capire, sfruttare e adottare questa soluzione.

Lo stato attuale delle cose può essere giocato qui e il codice è qui sotto:

xxxx
xxxx
xxxx

Domanda: all’interno della riga c’è un col-lg-8 che contiene due div col-lg-4 . Come ho capito, i controlli di input dovrebbero occupare l’intera larghezza dei loro contenitori, tuttavia il gruppo di moduli all’interno del col-lg-4 è significativamente più piccolo del suo contenitore.

Come si può sistemare questo layout in modo che i div con classi col-lg- designate utilizzino lo spazio disponibile?

aggiornato

Aggiungi css per espandere i controlli del modulo per espandere con div.

È questo che vuoi? http://www.bootply.com/y2K2OY8H1H

Hai avuto una riga, con una colonna di 8, con due colonne di 4 all’interno di quella. Quindi il col-8 riempie 8 delle 12 colonne principali. Quindi il 2 col-4 all’interno di quello riempie solo 8 dei 12 all’interno di col-8. Quindi ogni volta che nidifichi le colonne, crei colonne annidate. È un po ‘confuso, ma ha un senso.

NUOVO CSS:

  .form-group { width:100%; } .input-group { width:100%; } 

  
xxxx
xxxx
xxxx