Modello Twitter Bootstrap 3 del 100% di larghezza

Sono un principiante bootstrap e ho un modello ampio al 100% che voglio codificare con bootstrap. La prima colonna inizia nell’angolo sinistro e ho una mappa di Google che si estende fino all’estrema destra. Pensavo di poterlo fare con container-fluid class dei container-fluid per container-fluid , ma non sembra essere più disponibile. Non ho idea di come ottenere quel layout con bootstrap 3. Sto usando il modello Geometry PSD da themeforest, il link qui se vuoi vedere il layout: http://themeforest.net/item/geometry-design-for- geolocalizzazione-sociale-networkr / 4752268

Per Bootstrap 3, è necessario utilizzare un wrapper personalizzato e impostarne la larghezza al 100%.

 .container-full { margin: 0 auto; width: 100%; } 

Ecco un esempio funzionante su Bootply

Se preferisci non aggiungere una class personalizzata, puoi ottenere un layout molto ampio (non al 100%) avvolgendo tutto all’interno di una col-lg-12 ( demo di layout ampia )

Aggiornamento per Bootstrap 3.1

La class container-fluid è ritornata in Bootstrap 3.1, quindi può essere utilizzata per creare un layout a larghezza intera (non è richiesto alcun CSS aggiuntivo).

Demo di Bootstrap 3.1

Questa è la struttura di base completa per il layout al 100% della larghezza in Bootstrap v3.0.0 . Non dovresti avvolgere la tua

con la class del container . La class container richiederà un sacco di margine e questo non fornirà un layout a schermo intero (larghezza 100%) in cui bootstrap ha rimosso la class container-fluid dalla prima versione mobile v3.0.0.

Quindi inizia a scrivere

senza class contenitore e sei pronto per andare con il layout al 100% della larghezza.

 < !DOCTYPE html>   Bootstrap Basic 100% width Structure         
Test content
Another Content

Per vedere il risultato da solo ho creato un bootply. Guarda l’uscita dal vivo lì. http://bootply.com/82136 E il bootstrap basic completo 3 layout di larghezza 100% Ho creato un gist. puoi usare quello Ottieni l’essenza da qui

Rispondimi se hai bisogno di ulteriore assistenza. Grazie.

Usando Bootstrap 3.3.5 e .container-fluid , questo è il modo in cui ottengo tutta la larghezza senza grondaie o scorrimento orizzontale sul cellulare. Si noti che .container-fluid stato reintrodotto in 3.1.

Larghezza totale su dispositivo mobile / tablet, schermo 1/4 sul desktop

 

Larghezza totale su tutte le risoluzioni (mobile, tavolo, desktop)

 

Hai ragione usando div.container-fluid e hai anche bisogno di un figlio div.row . Quindi, il contenuto deve essere inserito all’interno senza alcuna colonna della griglia. Se dai un’occhiata ai documenti puoi trovare questo testo:

  • Le righe devono essere posizionate all’interno di un contenitore (larghezza fissa) o di un contenitore (a tutta larghezza) per un corretto allineamento e riempimento.
  • Utilizza le righe per creare gruppi orizzontali di colonne.

Non usare le colonne della griglia va bene come indicato qui:

  • Il contenuto deve essere inserito all’interno di colonne e solo le colonne possono essere figli di righe immediati.

E guardando questo esempio, puoi leggere questo testo:

Larghezza intera, singola colonna : non sono necessarie classi di griglia per elementi a larghezza intera.

Ecco un esempio dal vivo che mostra alcuni elementi usando il layout corretto. In questo modo non hai bisogno di CSS o hack personalizzati.