Bootstrap : comment modifier la largeur du conteneur ?

Question

J'ai utilisé Twitter Bootstrap pour développer un site Web avec la classe de conteneur fixe, mais maintenant le client veut que le site Web ait une largeur de 1000px et non de 1170px. Je n'utilise pas les fichiers .less.

Y a-t-il un moyen rapide de résoudre ce problème ?

Answer 1

Voici la solution :

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

L'avantage de cette méthode, par rapport à la personnalisation de Bootstrap comme dans l'exemple ci-dessous, est qu'elle permet d'obtenir des résultats plus précis. @Bastardo's La réponse est qu'elle ne modifie pas le fichier Bootstrap. Par exemple, si vous utilisez un CDN, vous pouvez toujours télécharger la majeure partie de Bootstrap à partir du CDN.

Answer 2

Allez à la Personnalisez sur le site Bootstrap et choisissez la taille que vous préférez. Vous devrez définir @gridColumnWidth y @gridGutterWidth variables.

Par exemple : @gridColumnWidth = 65px y @gridGutterWidth = 20px résultats sur un 1000px disposition.

Alors, téléchargez-le.

Answer 3

Vous vous attachez une main dans le dos en disant que vous n'utiliserez pas les fichiers LESS. J'ai construit mon premier thème Twitter Bootstrap en utilisant la version 2.0, et j'ai tout fait en CSS -- en créant un fichier override.css. Il m'a fallu des jours pour que les choses fonctionnent correctement.

Maintenant, nous avons la version 3.0. Laissez-moi vous assurer qu'il est plus rapide d'apprendre LESS, qui est assez simple si vous êtes à l'aise avec les CSS, que de faire toutes ces folles surcharges CSS. Apporter des modifications comme celle que vous souhaitez est un jeu d'enfant.

Dans Bootstrap 3.0, la classe du conteneur contrôle la largeur, et tous les styles contenus s'ajustent pour remplir le conteneur. Les variables relatives à la largeur du conteneur se trouvent au bas du fichier 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));

Certains sites n'ont pas assez de contenu pour remplir l'écran 1020 ou vous souhaitez un cadre plus étroit pour des raisons esthétiques. Comme BS utilise une grille à 12 colonnes, j'utilise un multiple de 960.

Answer 4

@mcbjam a déjà donné cette réponse mais voici un peu plus d'explications.

Vous pouvez facilement effectuer ce changement en utilisant une requête média dans votre fichier CSS sans télécharger BS. Je viens de le faire et cela fonctionne à merveille.

La valeur "min-width" de la requête média indiquera à CSS de modifier la largeur de votre conteneur à 1000px. uniquement sur les écrans de plus de 1200px (ou toute autre largeur que vous choisissez d'inclure ici). Cela préserve la réactivité de votre site. Ainsi, lorsque la taille de l'écran passe en dessous de cette valeur (écran plus petit, tablette, smartphone, etc.), votre site s'adaptera toujours aux écrans plus petits.

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

Answer 5

Pour bootstrap 4 si vous utilisez Sass voici la variable à éditer

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

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

Pour remplacer cette variable, j'ai déclaré $container-max-widths sans !default dans mon fichier .sass avant d'importer bootstrap.

Note : Je n'avais besoin de changer que la valeur xl, donc je n'ai pas eu besoin de penser aux points d'arrêt.