web-dev-qa-db-fra.com

Bootstrap 3 Le menu ne s'effondre pas sur Ipad

Je fais un projet en utilisant la nouvelle mise à jour Bootstrap 3 RC1 .

Il y a peut-être de nouvelles fonctionnalités avec le nouveau Bootstrap 3 qui sont très différents des versions précédentes. J'ai compris la plupart des changements mais je ne peux pas les résoudre:

lorsque le menu contient de nombreux éléments, il se casse dans l'iPad et d'autres tablettes, car il ne se réduit pas comme s'il se repliait automatiquement sur le mobile (ce qui est bien)

Je voudrais savoir comment "forcer" les iPads à agir comme des mobiles et à afficher un menu réduit ou mieux encore - comment réduire le menu s'il contient de nombreux éléments et sur certains écrans et s'il est plus petit qu'il se casse

voici des captures d'écran de mon projet live:

- Menu sur grands écrans -

enter image description here

- Menu sur Ipad Landscape -

enter image description here

- Menu sur Ipad Portrait -

enter image description here

- Menu sur mobile -

enter image description here

Je veux simplement que l'iPad se comporte comme un mobile. notez que le portrait agit comme un mobile en ce qui concerne le contenu mais pas le menu.

aucune suggestion? Merci

menucollapsenavbartwitter-bootstrap-3
13
gil hamer

Veuillez lire: http://bassjobsen.weblogs.fm/Twitter-bootstrap-3-breakpoints-and-grid/

L'effondrement de votre menu est défini dans le moins de fichiers. (Téléchargez la dernière version à partir de: https://github.com/twbs/bootstrap )

Dans variables.less, vous trouverez @grid-float-breakpoint: @screen-tablet; où @ screen-tablet fait 768 pixels.

Ainsi, par défaut, votre menu s'effondrera lorsque la largeur de l'écran sera inférieure à 768 pixels;

Le paysage de l'ipad a une largeur d'écran de 1024px, donc le menu ne s'effondrera PAS. La largeur de l'écran de l'ipad portrait est de 768 px, de sorte que le menu ne s'effondrera PAS.

Voir aussi navbar.less:

// Responsive navbar
// --------------------------------------------------

@media screen and (min-width: @grid-float-breakpoint) {

Pour modifier ce comportement, vous devez modifier le @ grid-float-breakpoint b.e défini sur 767 et recompiler vos fichiers css.

NB Vous avez également mentionné: "remarquez que le portrait agit comme un mobile en ce qui concerne le contenu mais pas le menu."

Vous utilisez "col-lg - " comme préfixe pour vos lignes de grille. Les éléments "col-lg - " s'empileront sous le 992px (portrait ipad) et deviendront horizontaux au-dessus de 992px (paysage ipad).

10
Bass Jobsen

J'ai également rencontré ce problème. Je vous suggère de visiter:

personnalisation Bootstrap

Trouvez le champ @grid-float-breakpoint et définissez-le sur la largeur de l'écran, après quoi le menu devrait s'effondrer. Là, vous pouvez utiliser des variables de la section précédente, à savoir de Media queries breakpoints pour définir les points appropriés.

Prenez également un moment et vérifiez toutes les variables disponibles pour les modifier. La création d'un package Bootstrap bien personnalisé peut vous faire économiser des heures de travail de développement, sinon plus.

9
Maciej Gurban

Les implémentations non moins que j'ai trouvées n'ont pas fonctionné

Impossible de trouver les styles pour que cela se produise seul, a fini par trouver cela - https://coderwall.com/p/wpjw4w

6
Horse

Pour ces pauvres âmes qui n'utilisent pas moins, vous devrez modifier le bootstrap.css et changer les requêtes multimédias associées à la barre de navigation qui ont un point d'arrêt de 768px à 992 px.

Par exemple, changez

@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}

à:

@media (min-width: 992px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
5
checkmate711

J'ai pu corriger notre problème en remplaçant la requête @media (max-width: 768px) par 767px à la place. L'un des liens ci-dessus faisait référence à un problème de 1px sur iPad qui se cassait différemment et forçait à la place la version mobile du site Web.

1
Joe Kuzma

J'avais le problème inverse. Sur iPad, la barre de navigation n'a pas été réduite (comme prévu), mais les styles d'une barre de navigation réduite ont été appliqués. Je l'ai résolu en modifiant la requête multimédia pour la barre de navigation effondrée en ajoutant -1 pour correspondre avec $grid-float-breakpoint comme suit:

@media (max-width: $screen-sm-min - 1) {
//styles for collapsed navbar (which won't show up on iPad portrait)
}
0
bart

Si quelqu'un utilise le fichier bootstrap.css standard, je devais le changer à 3 endroits:

autour de la ligne 3780

/*changed from 768 to 992 */
    @media (min-width: 992px) {
     .navbar-header {
      float: left;
     }
   }

autour de la ligne 3799

 /* changed from 768 to 992 */
    @media (min-width: 992px) {

autour de la ligne 3924

/*changed from 768 to 992 */
@media (min-width: 992px) {

J'espère que ça aidera quelqu'un :)

0
Jon