web-dev-qa-db-fra.com

Définition de la largeur maximale du corps avec Bootstrap

Construire mon premier site avec Twitter Bootstrap et expérimenter des dispositions fluides. J'ai défini mon conteneur comme étant fluide, le contenu à l'intérieur occupe désormais toute la largeur de la page et s'adapte 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 et responsive.less, et la documentation de Bootstrap, je ne sais pas trop comment faire pour que cela se produise. J'ai également essayé d'ajouter ce qui suit à mon style.css:

body {
    max-width: 950px;
}
htmltwitter-bootstrapcss
71
Olly F

Éditer

Une meilleure façon de faire est

  1. créez votre propre fichier less en tant que fichier principal less (comme bootstrap.less).

  2. Importer tous les fichiers bootstrap moins les fichiers dont vous avez besoin. (Dans ce cas, il vous suffit d'importer tous les fichiers moins réactifs mais responsive-1200px-min.less)

  3. Si vous avez besoin de modifier quelque chose dans le fichier original bootstrap moins, vous avez juste besoin d'écrire votre propre fichier moins pour écraser le moins de code de bootstrap. (N'oubliez pas de mettre votre moins de code/fichier après @import {bootstrap's moins de fichier};).

Original

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

Trouvez la requête du média.

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

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

Comme la largeur par défaut de Bootstrap est de 940 pixels), vous n'avez rien à faire.

Si vous voulez avoir votre propre max-width, il suffit de modifier la règle CSS dans la requête multimédia qui correspond à la largeur souhaitée.

27
maxisam

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éer bootstrap-custom.css - Dans la mesure du possible, je ne souhaite pas remplacer mon original bootstrap css.

  2. Dans bootstrap-custom.css, substituez le fluide conteneur en incluant le code suivant:

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 */
}
171
jcg

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

// Large desktops

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

Ainsi:

// Large desktops

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

Malheureusement, rien de ce qui précède n'a résolu le problème pour moi.

Je ne voulais pas éditer le fichier bootstrap-responsive.css, alors je suis allé facilement:

  1. Créer un fichier CSS avec une priorité sur bootstrap-responsive.css
  2. Copiez tout le contenu de la @media (min-width: 768px) and (max-width: 979px) (ligne 461 avec le plus récent bootstrap actuelle)).
  3. Collez-le dans votre css haute priorité
  4. Dans votre css, mettez @media (min-width: 979px) à la place où il est dit @media (min-width: 768px) and (max-width: 979px) avant. Cela définit le style de 768 à 979 à tout ce qui précède 768.

C'est ça. Ce n'est pas optimal, vous aurez du css dupliqué, mais ça marche à 100%!

2
chech

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

  • points d'interrogation des médias
  • Système de grille
  • Taille du conteneur

Outre points d'interrogation des médias, auquel la plupart des gens font référence, j'ai également remplacé @container-desktop Par (1130px + @grid-Gutter-width) Et par @container-large-desktop Par (1530px + @grid-Gutter-width). Maintenant, le .container Change de largeur si mon navigateur est mis à l'échelle jusqu'à ~ 1600px et ~ 1200px. J'espère que ça peut aider.

2
Celdor