Bootstrap 100% larghezza/Larghezza intera

Question

Voglio creare un nuovo sito Web con Bootstrap e ho bisogno che sia del 100% in larghezza, ma non voglio che sia fluido. Almeno non per ora.

Il problema che ho è: usando limiti standard bootstrap a 960 e con un layout fluido che è di grande ampiezza, ma si comporta come un layout fluido dovrebbe da elementi per diventare impilati muoversi quando la finestra è ridotto in dimensione.

C'è un modo per avere il 100% di larghezza con un layout di bootstrap statico?

Answer 1

100% larghezza ... statico

Questo è un po 'un ossimoro. Un layout di larghezza del 100% non è statico.

Bootstrap utilizza una classe .container per impostare una larghezza predefinita. Aumentalo alla larghezza della pagina desiderata se desideri che sia maggiore del valore predefinito. Fai attenzione però che il dimensionamento delle classi span* e offset* di Bootstrap necessiterà che le loro larghezze siano adeguate di conseguenza.

Answer 2

Immagino cosa vuoi dire se non vuoi margine/imbottitura ai lati. (questo è l'unico modo in cui il tuo messaggio ha senso - una larghezza del 100% prenderà le dimensioni dello schermo in modo che non sarà mai statico - la dimensione cambierà a seconda di quanto è grande la finestra)

Non abbiamo un caso d'uso o JSFiddle da te quindi non posso darti il ​​codice esatto, ma devi assicurarti che il tuo corpo abbia margine: 0 e padding: 0 e poi cerca le altre div con gli strumenti Firebug o Chrome Web Dev.

Se si desidera che il layout sia fluido ma si fermi a un certo punto in fase di crescita, è necessario applicare la larghezza massima: 1000 px (ad esempio) al corpo o all'elemento contenitore generale/wrapper.

Answer 3

Semplicemente non includere lo bootstrap-responsive.css per disattivare la funzione di risposta.

Se non si desidera una grondaia/margine .container, è possibile posizionare il contenuto all'esterno del contenitore ma tenere presente che è necessario mantenere il layout del contenuto da soli (è comunque possibile utilizzare la griglia ma non è possibile centrare il contenuto) e non dimenticare che la maggior parte del componente Bootstrap come .navbar necessita di .container per controllarne la larghezza.

Uno dei miei lavori necessita di un carosello a schermo intero per contenere tutti i contenuti in modo da avvolgere il mio contenuto con .container per centrare il contenuto.

Answer 4

Questo è facile da raggiungere in Bootstrap 3, basta sostituire il .container div con il proprio:

.my-fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Grazie a Erik fiori per la heads-up: http://www.helloerik.com/bootstrap-3-grid-introduction#fluid

UPDATE

Bootstrap 3 ora offre una classe di contenitori di liquidi incorporata, basta usare <div class="container-fluid">.See docs.

Answer 5

Non riesco a capire come rispondere alla domanda principale, ma ecco quello che vuoi OP

Come detto in precedenza, non usare .container, utilizzare la propria classe come:

.my-fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Quindi quando si costruisce la griglia, basta usare col-xs- * per le colonne. Ora avrai un sito di larghezza del 100% che non si impila nella vista "mobile". Benvenuti negli anni '90;)