Bootstrap: comment changer la largeur du conteneur?

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

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

Accédez à la section Personnaliser sur le site Bootstrap et choisissez la taille que vous préférez. Vous devrez définir @gridColumnWidthet @gridGutterWidthvariables.

Par exemple: @gridColumnWidth = 65pxet @gridGutterWidth = 20pxrésultats sur une 1000pxmise en page.

Puis téléchargez-le.

Voici la solution:

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

L'avantage de faire cela, par rapport à la personnalisation de Bootstrap comme dans la réponse de @ Bastardo , est que cela ne change pas le fichier Bootstrap. Par exemple, si vous utilisez un CDN, vous pouvez toujours télécharger la plupart de Bootstrap à partir du CDN.

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

Maintenant, nous avons 3.0. Laissez-moi vous assurer qu'il faut moins de temps pour apprendre MOINS, ce qui est assez simple si vous êtes à l'aise avec CSS, que de faire tous ces remplacements CSS fous. Faire des changements comme celui que vous souhaitez est un jeu d'enfant.

Dans Bootstrap 3.0, la classe conteneur contrôle la largeur et tous les styles contenus s'ajustent pour remplir le conteneur. Les variables de 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'affichage 1020 ou vous voulez un cadre plus étroit pour des raisons esthétiques. Parce que BS utilise une grille de 12 colonnes, j'utilise un multiple comme 960.

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

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

La valeur "min-width" de la requête multimédia indiquera à CSS de changer la largeur de votre conteneur à 1000px uniquement sur les écrans plus grands que 1200px (ou quelle que soit la largeur que vous choisissez d'y inclure). Cela préserve la réactivité de votre site, donc lorsque la taille de l'écran passe en dessous de cette valeur (moniteur plus petit, tablette, smartphone, etc.), votre site s'ajustera toujours pour s'adapter aux écrans plus petits.

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

Pour bootstrap 4 si vous utilisez Sass, voici la variable à modifier

// 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 le bootstrap.

Remarque: je n'avais besoin que de changer la valeur xl, donc je ne me souciais pas de penser aux points d'arrêt.

Définissez votre propre classe de conteneur de contenu avec la propriété de largeur 1000px, puis utilisez la classe de boostrap de fluide conteneur au lieu de conteneur.

Fonctionne mais n'est peut-être pas la meilleure solution.

Utilisez un sélecteur de wrapper et créez un conteneur qui a une largeur de 100% à l'intérieur de ce wrapper pour encapsuler la page entière.

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

Maintenant, la largeur maximale est fixée à 1000px et vous n'avez pas besoin de moins ou de sass.

Tailles des conteneurs

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

dans la section Tailles des conteneurs, passez 1140à970

J'espère que cela vous aidera.

merci pour votre correct. lien pour personnaliser le bootstrap: https://getbootstrap.com/docs/3.4/customize/

Ajoutez ces morceaux de CSS dans votre style css. Il est préférable d'ajouter ceci après l'ajout du fichier css d'amorçage afin de l'écraser.

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