Comment annuler l'adaptation bootstrap

Comment annuler l'adaptation bootstrap : 1. Supprimez l'en-tête ""; la largeur est suffisante.

L'environnement d'exploitation de ce tutoriel : système Windows10, bootstrap3.0 Cet article est applicable à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo bootstrap"

Désactiver la solution réactive bootstrap

J'ai reçu une tâche il y a quelques jours, J'ai utilisé le framework bootstrap pour écrire plusieurs pages statiques. Comme je me suis longtemps concentré sur le développement backend, il m'a fallu 3 jours pour enfin terminer la page. Au cours du processus, j'ai fait quelques allers-retours et parlé du. problèmes que j'ai rencontrés.

Après avoir utilisé bootstrap pour créer la page, le chef d'équipe a de nouveau changé d'avis et a déclaré que bootstrap ne devait pas être utilisé, ou que la réactivité du bootstrap ne devait pas être désactivée. mais pour désactiver la réactivité, ce qui prendrait du temps. Le plus court, rendez-vous sur le site officiel de bootstrap, d'abord : supprimez l'en-tête . Deuxièmement : définissez la largeur du .container, par exemple :

container{
width: 1170px;
max-width: none !important;
}

Troisièmement : utilisez le style .col-xs- (classe de grille de périphérique minimale) pour remplacer .col-md- et .col-lg-*.

Cependant, le problème ne s’arrête pas pour le moment.

Donnez maintenant au conteneur une largeur fixe, et la largeur de la barre de navigation avec un fond blanc peut remplir le navigateur. Cependant, à mesure que l'écran devient plus petit, le fond blanc de la barre de navigation ne peut pas remplir la largeur de. le navigateur après il devient plus petit ! De plus, mon image de carrousel doit également remplir la largeur du navigateur, et maintenant elle est affichée au milieu. Je me suis dit que si j'avais su mieux, je n'aurais pas besoin de bootstrap. maintenant? J'ai vérifié en ligne mais je n'ai pas trouvé de solution. Plus tard, j'ai eu une idée : je pourrais donner une largeur au corps ou définir la même largeur pour la barre de navigation et le carrousel. La question à ce stade est de savoir quelle largeur dois-je définir. ? J'ai découvert que vous ne pouvez pas faire ça !

Enfin, lorsque je débogais le code avec Firefox, j'ai accidentellement découvert cette bonne chose, @media Cependant, je l'ai configuré moi-même et il n'a pas répondu sur le navigateur. à la fin, j'ai mis du temps à trouver que ce style n'était pas écrit correctement.

Donc, le quatrième point pour résoudre le problème de réactivité de la barre de navigation et du carrousel est :

@media screen and (max-width: 1400px) {
body{
width: 1400px;
}
}

Ce qu'il veut dire, c'est que lorsque l'écran est plus petit que 1400px, définissez la largeur du corps sur 1400px . Les lecteurs qui ne le savent pas peuvent l'apprendre en ligne. C'est une bonne chose !

Enfin, top fait référence à top lorsque la position est en position absolue. La définition de la largeur et de la hauteur de span n'a aucun effet. Ce n'est pas un élément de niveau bloc, div est un élément de niveau bloc et span est un élément en ligne. Si vous souhaitez utiliser span pour implémenter le bouton dans l'image ci-dessous, il vous suffit de définir le remplissage selon vos besoins. (remplissage : 20px 20px, etc.)

Comme je ne suis pas une personne front-end, je ne connais pas très bien ces styles. Si vous ne les aimez pas, ne les vaporisez pas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!