Bootstrap: come cambio la larghezza del container?

127

Ho utilizzato Twitter Bootstrap per sviluppare un sito Web con la classe contenitore fissa, ma ora il cliente desidera che il sito Web abbia una larghezza di 1000 px e non di 1170 px. Non uso i file .less.

C'è un modo rapido per risolvere questo problema?

twitter-bootstrap

— alex
fonte

Fai riferimento alla risposta qui , penso che il tuo problema verrà risolto dal violino solo fisso in quella risposta.

— prem

@prem, tx ma non ottengo l'esempio in quanto non utilizza nessuna delle classi bootstrap come span's o container. Tutto quello che penso di cui ho bisogno per questo progetto è impostare il massimo del container a 940px con il bootstrap reattivo.

— alex

76

Vai alla sezione Personalizza del sito Bootstrap e scegli la taglia che preferisci. Dovrai impostare @gridColumnWidthe @gridGutterWidthvariabili.

Ad esempio: @gridColumnWidth = 65pxe @gridGutterWidth = 20pxrisultati su un 1000pxlayout.

Quindi scaricalo.

— albertedevigo
fonte

non si può raggiungere il contenitore esatto di 1000px modificando le variabili gridColumnWidth e gridGutterWidth ... perché (12 * (gridColumnWidth) + 12 (gridGutterWidth)) non è uguale a 1000. E così ho solo dato quella soluzione. È corretto?

— prem

15

Teoricamente, ci sono infinite combinazioni che corrispondono a 1000px. Un esempio: 12 * 65 + 11 * 20 = 1000 (ci sono solo 11 grondaie tra le colonne).

— albertedevigo

eh! davvero non ho riconosciuto la cosa semplice ... comunque la tua era la soluzione giusta.

— prem

Grazie per il tuo post, è stato utile;) Solo una nota: in pratica ci sarebbero esattamente 7 soluzioni che utilizzano pixel pieni per 1000px di larghezza. (larghezze colonne 10, 21, 32, 43, 54, 65 e 76)

— dfherr

@dfherr Non so cosa intendi esattamente quando dici "praticamente", ma tieni presente che CSS supporta valori decimali per i pixel. Pertanto, ci sono infinite soluzioni. w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

232

Ecco la soluzione:

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

Il vantaggio di farlo, rispetto alla personalizzazione di Bootstrap come nella risposta di @ Bastardo , è che non cambia il file Bootstrap. Ad esempio, se si utilizza una CDN, è comunque possibile scaricare la maggior parte di Bootstrap dalla CDN.

— mcbjam
fonte

10

La maggior parte delle risposte trascura CDN. La tua risposta è una soluzione perfetta.

— Charles Watson

2

È perfetto per le persone che utilizzano il CDN. La modifica di LESS (quando arriva 4, SASS) in fase di compilazione è perfetta per le persone che ospitano il proprio CSS Bootstrap. Tuttavia, modificare un LESS personalizzato (o SASS) importato dopo quello fornito significa che è possibile aggiornare il LESS sottostante senza (solitamente) fare un diff.

— Greg Pettit

2

So che è davvero tardi, ma dato che i contenitori tendono ad essere più grandi ora se aggiungi width: auto al codice sopra puoi rendere i contenitori più grandi del loro massimo 1170.

— Rick Calder

È quello che stavo cercando. Grazie.

— tedebus

20

Ne stai legando uno dietro la schiena dicendo che non utilizzerai i file LESS. Ho creato il mio primo tema Bootstrap per Twitter utilizzando 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 MENO, il che è abbastanza semplice se siete a vostro agio con i CSS, piuttosto che fare tutte quelle folli sostituzioni CSS. Apportare modifiche come quella che desideri è un gioco da ragazzi.

In Bootstrap 3.0, la classe del contenitore controlla la larghezza e tutti gli stili contenuti si adattano per riempire il contenitore. Le variabili della larghezza del contenitore sono in fondo al 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 si desidera una cornice più stretta per motivi estetici. Poiché BS utilizza una griglia a 12 colonne, io uso un multiplo come 960.

— Bastardo Sucio
fonte

4

Funziona, ma: i nomi delle variabili sono @container-sm, @container-mde @container-lg(ora)

— Andreas Dolk

1

@Bastardo bel nome +1

— Ömer An

18

@mcbjam ha già dato questa risposta, ma ecco qualche spiegazione in più.

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

Il valore "min-width" della media query indicherà a CSS di modificare la larghezza del contenitore a 1000 px solo su schermi più grandi di 1200 px (o qualsiasi larghezza tu scelga di includere lì). Ciò preserva la reattività del tuo sito, quindi quando la dimensione dello schermo salta al di sotto di quel 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;
  }
}

— Jeff Schwarting
fonte

13

Per bootstrap 4 se stai usando Sass ecco la variabile da modificare

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Per sovrascrivere questa variabile ho dichiarato $ container-max-widths senza il valore predefinito! Nel mio file .sass prima di importare bootstrap.

Nota: avevo solo bisogno di modificare il valore xl, quindi non mi importava di pensare ai punti di interruzione.

— Kaizoku Gambare
fonte

12

Imposta la tua classe del contenitore di contenuti con la proprietà di larghezza 1000px e quindi usa container-fluid classe boostrap invece del contenitore.

Funziona ma potrebbe non essere la soluzione migliore.

— Geo
fonte

6

Usa un selettore wrapper e crea un contenitore che abbia una larghezza del 100% all'interno di quel wrapper per incapsulare l'intera pagina.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

Ora la larghezza massima è impostata su 1000px e non hai bisogno di less o sass.

— Larry Judd
fonte

0

Dimensioni dei contenitori

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

nella sezione Dimensioni del contenitore, passare 1140a970

Spero che ti aiuti.

grazie per il tuo corretto. collegamento per personalizzare il bootstrap: https://getbootstrap.com/docs/3.4/customize/

— Quindi Santo
fonte

-3

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

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

— Mahendra
fonte