Définition de la largeur maximale du corps à l'aide de Bootstrap

Question

Je construis mon premier site avec Twitter Bootstrap et j'expérimente les mises en page fluides. J'ai configuré mon conteneur de manière à ce qu'il soit fluide, ce qui permet au contenu d'occuper toute la largeur de la page et de s'adapter au redimensionnement du navigateur.

Le design sur lequel je travaille a été créé pour une largeur maximale de ~950px.

J'ai vérifié variables.less y responsive.less et la documentation de Bootstrap ; je n'arrive pas à trouver comment faire pour que cela se produise.

J'ai également essayé d'ajouter ce qui suit à mon style.css :

body {
    max-width: 950px;
}

Answer 1

Vous n'avez pas besoin de modifier bootstrap-responsive en supprimant @media (max-width:1200px) ...

Mon application a un max-width de 1600px. Voici comment cela a fonctionné pour moi :

1. Créez bootstrap-custom.css - Autant que possible, je ne veux pas remplacer mon css bootstrap original.

2. Dans le fichier bootstrap-custom.css, remplacez le container-fluid en incluant ce code :

Comme ça :

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

Answer 2

Modifier

Une meilleure façon de le faire est :

1. Créez votre propre fichier less comme fichier less principal ( comme bootstrap.less ).

2. Importez tous les fichiers bootstrap less dont vous avez besoin. (dans ce cas, vous avez juste besoin d'Importer tous les fichiers less responsive mais responsive-1200px-min.less )

3. Si vous devez modifier quoi que ce soit dans le fichier less original de bootstrap, il vous suffit d'écrire votre propre less pour écraser le code less de bootstrap. (N'oubliez pas de placer votre code/fichier less après @import { /* bootstrap's less file */ }; ).

Original

J'ai le même problème. Voici comment je l'ai résolu.

Trouvez la requête média :

@media (max-width:1200px) ...

Enlevez-le. (Je veux dire tout le truc, pas seulement @media (max-width:1200px) )

La largeur par défaut de Bootstrap étant de 940px, vous n'avez rien à faire.

Si vous voulez avoir votre propre max-width Si vous avez besoin de plus d'espace, il suffit de modifier la règle css dans la requête média qui correspond à la largeur souhaitée.

Answer 3

Dans responsive.less, vous pouvez commenter la ligne qui importe responsive-1200px-min.less.

// Large desktops

@import "responsive-1200px-min.less";

Comme ça :

// Large desktops

// @import "responsive-1200px-min.less";

Answer 4

Je ne sais pas si cela a été signalé ici. Les paramètres de .container doivent être définis sur le site Web de Bootstrap. Personnellement, je n'ai pas eu à modifier ou à toucher quoi que ce soit dans les fichiers CSS pour régler mon site Web. .container qui est de 1600px. Sous l'onglet Personnaliser, il y a trois sections responsables des médias et de la réactivité du web :

• Points d'arrêt des requêtes média
• Système de grille
• Taille des conteneurs

Outre Points d'arrêt des requêtes média Je crois que la plupart des gens s'y réfèrent, j'ai aussi changé @container-desktop a (1130px + @grid-gutter-width) y @container-large-desktop a (1530px + @grid-gutter-width) . Maintenant, le .container change sa largeur si mon navigateur est mis à l'échelle à ~1600px et ~1200px. J'espère que cela pourra vous aider.

Answer 5

Malheureusement, aucune des solutions ci-dessus n'a résolu le problème pour moi.

Comme je ne voulais pas modifier le fichier bootstrap-responsive.css, j'ai choisi la solution de facilité :

1. Créer un css avec priorité sur bootstrap-responsive.css
2. Copiez tout le contenu de l @media (min-width: 768px) and (max-width: 979px) (ligne 461 avec la dernière version de bootstrap 2.3.1 à ce jour)
3. Collez-le dans votre css de haute priorité
4. Dans votre css, mettez @media (min-width: 979px) à l'endroit où il est dit @media (min-width: 768px) and (max-width: 979px) avant. Cela définit le style de 768 à 979 pour tout ce qui est supérieur à 768.

C'est tout. Ce n'est pas optimal, vous aurez des css dupliqués, mais cela fonctionne parfaitement !