Bootstrap 3 Menu ne s'effondre pas sur Ipad

Je suis en train de réaliser un projet à l'aide de la nouvelle mise à jour Bootstrap 3 RC1.

Il y a peut de nouvelles fonctionnalités avec la nouvelle Bootstrap 3, qui sont bien différents de ceux que les versions précédentes.
J'ai pensé que la plupart des changements, mais d'une je ne peux pas résoudre:

lorsque le menu a de nombreux éléments de casse dans l'Ipad et autres tablettes, car il n'ya pas effondré comme automatiquement, il s'est effondré sur le mobile (qui est bonne)

Je voudrais savoir comment faire pour "forcer" les ipads d'agir comme le téléphone mobile et afficher un menu réduit ou mieux encore - comment réduire le menu si elle a de nombreux articles et sur certains écrans et les plus petits, il rompt

voici des captures d'écran de mon projet:

-- Menu sur des Écrans géants --

Bootstrap 3 Menu ne s'effondre pas sur Ipad

-- Menu sur Ipad Paysage --

Bootstrap 3 Menu ne s'effondre pas sur Ipad

-- Menu sur Ipad Portrait --

Bootstrap 3 Menu ne s'effondre pas sur Ipad

-- Menu sur Mobile --

Bootstrap 3 Menu ne s'effondre pas sur Ipad

Je veux simplement que l'ipad d'agir comme mobile. notez que le portrait n'agissent comme mobile autant que le contenu, mais pas le menu.

des suggestions?
Grâce

source d'informationauteur gil hamer

  1. 10

    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écharger la dernière version à partir de:https://github.com/twbs/bootstrap )

    Dans des variables.moins vous trouverez @grid-float-breakpoint: @screen-tablet; où @l'écran de la tablette est 768px.

    Donc, par défaut, votre menu va s'effondrer lorsque la largeur de l'écran est inférieure à la 768px;

    L'ipad paysage a un écran d'une largeur de 1024px de sorte que le menu ne s'effondre PAS. L'ipad portrait de la largeur de l'écran est de 768 px si le menu ne s'effondre PAS.

    Voir aussi la barre de navigation.moins:

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

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

    Pour modifier ce comportement, vous devez changer le @grille-float-point d'arrêt.b.e 767 et recompiler vos fichiers css.

    NB Vous avez également mentionné: "notez que le portrait n'agissent comme mobile autant que le contenu, mais pas le menu."

    Vous utilisez "col-lg-" comme préfixe pour vos lignes de la grille. "col-lg-" éléments de pile en dessous de la 992px (ipad portrait) et deviennent horizontales au-dessus de 992px (ipad paysage).

  2. 9

    Viens de tomber sur cette question. Je vous suggère de visiter:

    Bootstrap de personnalisation

    Trouver le terrain @grid-float-breakpoint et réglez la largeur de l'écran après le menu qui doit s'effondrer. De là, vous pouvez utiliser des variables de la section précédente, à savoir de Media queries breakpoints à régler correctement les points.

    Aussi, prenez un moment pour vérifier toutes les variables disponibles à changer. La création d'un bien-personnalisée paquet Bootstrap peut vous épargner des heures de dev. travail, si pas plus.

  3. 5

    Pour ces pauvres âmes qui ne sont pas en utilisant moins d', vous devez modifier le fichier de bootstrap.css et modifier des requêtes de média associé avec barre de navigation qui ont un point d'arrêt de 768px à 992 px.

    Par exemple, le changement

    @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;
  }
}
  4. 5

    Le non moins implémentations que j'ai trouvé ne fonctionne pas

    Ne pouvais pas trouver les styles pour ce faire sur son propre partout, finit par trouver ce - https://coderwall.com/p/wpjw4w

  5. 1

    J'ai été en mesure de corriger notre problème en changeant le @media (max-width: 768px) requête pour 767px à la place. L'un des liens ci-dessus fait référence à un 1px problème sur iPad qui rompt de manière différente et a forcé la version mobile du site web à la place.

  6. 0

    Si quelqu'un est à l'aide de la norme de bootstrap.fichier css, j'ai dû le changer dans 3 lieux:

    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 cela aide quelqu'un 🙂

  7. 0

    J'ai eu le problème inverse. Sur l'iPad, la barre de navigation n'était pas effondré (comme prévu), mais les styles pour un effondrement de l'barre de navigation ont été appliquées. Je l'ai résolu en changeant la requête de support pour la barre de navigation s'est effondré 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)
}