IP Girl
  1. IP Girl
  3. Comment changer la largeur de navbar / container? Bootstrap 3
Intereting Posts
Mettre à jour R en utilisant RStudio Quelle est la différence entre CHARACTER VARYING et VARCHAR dans PostgreSQL? Les éléments flottants à l’intérieur d’un div, flottent à l’extérieur de div. Pourquoi? Quand devriez-vous utiliser “friend” en C ++? IEqualityComparer qui utilise ReferenceEquals La compilation AAPT2 a échoué: dimen invalide sur Android 3.0 Canary 1 Pourquoi déclarer un argument de fonction comme final? Pourquoi quelqu’un utiliserait-il l’opérateur << dans une déclaration enum? Log4Net: Appender Rolling File, définir l’extension Django: Valeur de choix d’affichage Forcer l’Explorateur de solutions à sélectionner le fichier dans l’éditeur de Visual Studio 2005 Pourquoi les expressions constantes ont-elles une exclusion pour un comportement non défini? ruby – ne peut pas modifier la chaîne gelée (TypeError) FragmentTransaction animation à glisser par dessus Retour de DataTables dans WCF / .NET

Comment changer la largeur de navbar / container? Bootstrap 3

La largeur par défaut de ma barre de navigation est trop large, 1170px . Je voudrais le réduire à 940px – mais je veux garder la réactivité.

J’ai essayé de modifier la largeur du conteneur en CSS et cela semble correct avec un grand navigateur, mais le rest de la page tombe en panne lors de l’affichage pour les tailles mobiles.

Est-ce la bonne propriété ou y a-t-il autre chose? 

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

Voici mon code navbar 

 
 
 
  Site Name

Je viens de résoudre ce problème moi-même. Vous étiez sur la bonne voie. 

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

Ici, nous disons: Sur les fenêtres 1200px ou plus – définissez la largeur maximale du conteneur à 970px. Cela écrasera la classe standard qui définit actuellement max-width à 1170px pour cette plage.

NOTE: Assurez-vous d’inclure ceci APRÈS le matériel bootstrap.css (tout le monde a fait cette petite erreur dans le passé).

En espérant que ça aide, bonne chance!

La largeur des conteneurs sera réduite à 940 pixels pour les fenêtres de moins de 992 pixels. Si vous ne voulez vraiment pas que les conteneurs aient une largeur supérieure à 940 pixels, accédez à la page de personnalisation Bootstrap et définissez @container-lg-desktop sur @container-desktop ou 940px codé en 940px .

Le .navbar-static-top vous utilisez force votre navbar à devenir pleine largeur. Supprimez cette classe et vous obtiendrez une navbar redimensionnable. Ensuite, vous pouvez l’enrouler dans un span# de la taille souhaitée. 

 
 
 
 
 ...

Bonjour ce travail vous essayez! dans votre cas, c’est .navbar-fixed-top {} 

 .navbar-fixed-bottom{ width:1200px; left:20%; }

La manière correcte de le faire est de changer la largeur du personnalisateur en ligne ici:

http://getbootstrap.com/customize/

télécharger la source recompilée, écraser le répertoire de départ bootstrap existant et recharger (attention au cache du navigateur !!!)

Toutes vos modifications seront conservées dans le fichier de configuration .json

Pour appliquer à nouveau toutes les modifications, téléchargez simplement le fichier json et vous êtes prêt à partir.

Si vous avez affaire à des résolutions / tailles d’écran plus dynamics, au lieu de coder en dur la taille en pixels, vous pouvez modifier la largeur en pourcentage de la largeur du support. 

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

simplement simple: 

 .navbar{ width:65% !important; margin:0px auto; left:0; right:0; padding:0; }

ou, 

 .navbar.navbar-fixed-top{ width:65% !important; margin:0px auto; left:0; right:0; padding:0; }

J’espère que ça marche (au moins pour les futurs chercheurs)