Bootstrap: come cambio la larghezza del contenitore?

Ho utilizzato Twitter Bootstrap per sviluppare un sito Web con la class di contenitori fissi, ma ora il client vuole che il sito Web sia di 1000 px di larghezza e non di 1170 px. Non uso i file .less.

C’è un modo rapido per risolvere questo problema?

Vai alla sezione Personalizza sul sito Bootstrap e scegli la dimensione che preferisci. Dovrai impostare le variabili @gridColumnWidth e @gridGutterWidth .

Ad esempio: @gridColumnWidth = 65px e @gridGutterWidth = 20px risultati @gridGutterWidth = 20px su un layout 1000px .

Quindi scaricarlo.

Ecco la soluzione:

 @media (min-width: 1200px) { .container{ max-width: 970px; } } 

Il vantaggio di farlo, rispetto alla personalizzazione di Bootstrap come nella risposta di @Basardo, è che non cambia il file Bootstrap. Ad esempio, se si utilizza un CDN, è ancora ansible scaricare la maggior parte di Bootstrap dal CDN.

Stai legando uno dietro le spalle dicendo che non userai i file LESS. Ho creato il mio primo tema su Twitter Bootstrap usando 2.0 e ho fatto tutto in CSS, creando un file override.css. Ci sono voluti giorni per far funzionare le cose correttamente.

Ora abbiamo 3.0. Permettetemi di assicurarvi che ci vuole meno tempo per imparare LESS, che è piuttosto semplice se siete a vostro agio con i CSS, piuttosto che fare tutti quei pazzi override CSS. Fare cambiamenti come quello che vuoi è un gioco da ragazzi.

In Bootstrap 3.0, la class contenitore controlla la larghezza e tutti gli stili contenuti si adattano per riempire il contenitore. Le variabili di larghezza del contenitore si trovano nella parte inferiore del file variables.less.

 // Container sizes // -------------------------------------------------- // Small screen / tablet @container-tablet: ((720px + @grid-gutter-width)); // Medium screen / desktop @container-desktop: ((940px + @grid-gutter-width)); // Large screen / wide desktop @container-lg-desktop: ((1020px + @grid-gutter-width)); 

Alcuni siti non hanno abbastanza contenuti per riempire il display 1020 o desideri una cornice più stretta per motivi estetici. Poiché BS utilizza una griglia a 12 colonne, utilizzo un multiplo come 960.

@ mcbjam ha già dato questa risposta, ma qui c’è un po ‘più di spiegazione.

È ansible apportare facilmente la modifica utilizzando una query multimediale nel file CSS senza scaricare BS. L’ho fatto e funziona magnificamente.

Il valore “min-width” della query media dirà ai CSS di modificare la larghezza del contenitore a 1000px solo su schermi più grandi di 1200px (o qualsiasi altra larghezza tu scelga di includere). Ciò preserva la reattività del tuo sito, quindi quando le dimensioni dello schermo salgono al di sotto di tale valore (monitor più piccolo, tablet, smartphone, ecc.), Il tuo sito si adatterà comunque per adattarsi agli schermi più piccoli.

 @media (min-width: 1200px) { .container { width: 1000px; } } 

Imposta la tua class contenitore di contenuti con la proprietà 1000px width e quindi usa la class boostrap fluid- container anziché container.

Funziona ma potrebbe non essere la soluzione migliore.

Utilizza un selettore wrapper e crea un contenitore con una larghezza del 100% all’interno di tale wrapper per incapsulare l’intera pagina.

   
....

Ora la larghezza massima è impostata su 1000 px e non è necessario né inferiore né inferiore.

Aggiungi questo pezzo di CSS nel tuo stile css. È meglio aggiungerlo dopo aver aggiunto il file cst bootstrap per sovrascrivere lo stesso.

 html, body { height: 100%; max-width: 100%; overflow-x: hidden; }`