Réglage de la largeur maximale pour le corps à l'aide de Bootstrap
Je suis en train de construire mon premier site avec Twitter Bootstrap et d'expérimenter avec les dispositions fluides. J'ai mis mon conteneur de fluide, maintenant le contenu à l'intérieur prend toute la largeur de la page et s'adapte comme je l'ai redimensionner le navigateur.
Le design, je suis en train de travailler sur a été créé pour une largeur maximale de ~950px.
J'ai vérifié variables.less
et responsive.less
, et le Bootstrap, documentation; je ne peux pas tout à fait comment pour que cela se produise.
J'ai aussi essayé d'ajouter ce qui suit à mon style.css
:
body {
max-width: 950px;
}
max-width: 950px;
(côlon pas de signe égal)- Désolé! Mon erreur, je l'avais essayé avec les deux points, pas le signe égal. Fait l'erreur lors de l'écriture, ici, sur Stackoverflow. Édité le post pour refléter cette (laissez-moi savoir si c'est une mauvaise forme).
- votre règle css qui fonctionne, ce qui est mal à cela? démo
- Ok. Une nouvelle tentative. Ce n'était pas de travailler plus tôt, cependant, qui peuvent avoir été à certaines questions que je vais avoir avec MOINS d'/Espresso/Codekit. Mon MOINS de fichiers n'ont pas été de compiler correctement. Cependant, maintenant que cela fonctionne,
body
aligne à gauche au lieu de centre comme avant. Toutes les suggestions? J'ai essayé de réglagemargin
àauto
pour la gauche et la droite. - Attendez, vous voulez que votre "conteneur" à être la largeur de 950px et non pas le document complet? Je suis confus, twitters non-récipient de liquide, c'est la largeur 940px par défaut, de sorte que ses dessous de votre contrainte.
- Ma compréhension est que c'est mieux si le
body
a unmax-width
, juste au cas où je veux faire quelque chose à l'extérieur du récipient. De toute façon, le réglage de cela de côté, je fais face à un récipient de liquide. Lorsque j'ai mis mon conteneur de fluide, elle s'étend à l'ensemble de la largeur du corps. C'est pourquoi je suis en train de définir une largeur maximale pour le corps. - il suffit de retirer le support approprié requête qui traite de la délinquance de la largeur et vous devriez être ok, de printemps ou pour un conteneur.
- Je ne suis pas sûr de comprendre comment les identifier ou de traiter avec les médias de la requête. Je sais que ça va être en responsive.de moins en moins. Je ne sais pas ce que je cherche ou quoi faire avec elle si.
- modifier cette requête de média à l'intérieur de la responsive css pour la largeur que vous êtes à la recherche pour:
@media (min-width: 768px) and (max-width: 979px) { .. }
, dans votre cas, seraitmax-width:950px;
.
Vous devez vous connecter pour publier un commentaire.
Modifier
Une meilleure façon de le faire est:
Créer votre propre moins fichier en tant que principal moins de fichier ( bootstrap.de moins en moins ).
Importer tous les fichiers d'amorce moins de fichiers dont vous avez besoin. (dans ce cas, vous avez juste besoin d'Importer tous les réactifs moins de fichiers, mais
responsive-1200px-min.less
)Si vous avez besoin de modifier quoi que ce soit dans l'original bootstrap moins de fichier, il vous suffit d'écrire votre propre moins de remplacer bootstrap de moins de code. (N'oubliez pas de mettre votre moins de code/fichier après
@import { /* bootstrap's less file */};
).Original
J'ai le même problème. C'est la façon dont je l'ai corrigé.
Trouver la requête de média:
L'enlever. (Je veux dire la chose entière , et pas seulement
@media (max-width:1200px)
)Depuis la largeur par défaut de Bootstrap est 940px, vous n'avez pas besoin de faire quoi que ce soit.
Si vous voulez avoir votre propre
max-width
, juste de modifier le fichier css de la règle dans les médias requête qui correspond à votre largeur désirée.Vous n'avez pas à modifier bootstrap-responsive en supprimant
@media (max-width:1200px)
...Ma demande a un
max-width
de 1600px. Voici comment cela a fonctionné pour moi:Créer bootstrap personnalisé.css - autant Que possible, je ne veux pas remplacer l'original de mes bootstrap css.
À l'intérieur de bootstrap personnalisé.css, remplacer le conteneur de fluide par l'inclusion de ce code:
Comme ceci:
margin
attributs ne sont plus nécessaires, le rendant simplement.container-fluid { max-width: XXX%; }
quelle que soit la feuille de style personnalisée que vous avez.max-width: map-get($grid-breakpoints, xl);
pour le "xl" point d'arrêt de la taille (1200px par défaut)!En répondant.moins, vous pouvez mettre en commentaire la ligne qui les importations responsive-1200px-min.de moins en moins.
Comme suit:
Malheureusement, aucun des ci-dessus ont résolu le problème pour moi.
Je ne veux pas modifier le bootstrap-responsive.css donc je suis allé la voie de la facilité:
@media (min-width: 768px) and (max-width: 979px)
(ligne 461 avec la dernière version de démarrage de la version 2.3.1 comme d'aujourd'hui)@media (min-width: 979px)
dans l'endroit où il dit@media (min-width: 768px) and (max-width: 979px)
avant. Cela définit à partir de 768 à 979 style à tout ce qui précède 768.Que c'est. Il n'est pas optimale, vous avez dupliqué css, mais il fonctionne à 100% parfait!
Je ne sais pas si cela a été souligné ici. Les paramètres de
.container
largeur doivent être mis sur le Bootstrap site web. Personnellement, je n'avait pas de modifier ou de toucher quoi que ce soit dans les fichiers CSS pour régler mon.container
taille qui est 1600px. En vertu de l'onglet Personnaliser, il y a trois sections responsables des médias et de la réactivité du web:Outre requêtes de Média points d'arrêt, qui, je crois, la plupart des gens, j'ai aussi changé
@container-desktop
à(1130px + @grid-gutter-width)
et@container-large-desktop
à(1530px + @grid-gutter-width)
. Maintenant, la.container
de ses changements de largeur si mon navigateur est mise à l'échelle jusqu'à ~1600px et ~1200px. J'espère que ça peut aider.