Bootstrap `.hidden-xs " ne pas cacher div

Je suis en train de créer un site, qui permet de masquer une longue section pour les utilisateurs sur un petit écran à l'aide de Bootstrap est .hidden-xs Pour le tester, je suis en utilisant google Chrome mobile de l'émulateur, le paramètre "iPhone 5" (assez petit). Lorsque j'actualise la page, cependant, il ne permet pas de cacher la div. Suis-je à l'aide de la classe de mal?

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, intial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="static/css/todo.css">
        <title>TODO</title>
    </head>

    <body>
        <div class="container-fluid">
            <header>

            </header>
            <div id="left">
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
            </div>
            <div class="main" class="hidden-xs">
            </div>
        </div>
    </body>
</html>

CSS

/* CSS Document */

body {
    margin: 0;
}

header {
    height: 10em;
    width: 100%;
    border-bottom: 1px solid #000000;
}

#left {
    float: left;
    height: 80%;
    max-width: 100%;
    width: 20%;
    border-right: 1px solid black;
    overflow: scroll;
}

#main {
    float: left;
    width: 80%;
    height: 100%;
}

.test {
    height: 10em;
    background-color: #eeeeee;
    width: 100%
}

.test:hover {
    background-color: #dddddd;
}

ici est un JSFiddle démontrant mon code: https://jsfiddle.net/James_Parsons/jwqdbn61/

MODIFIER

Apparemment un iPhone 5 n'est pas assez petit. Si j'utilise les deux .hidden-xs et .hidden-sm qu'il sera caché sur tous les petits appareils?

double possible de l'iPhone 5 CSS media query

OriginalL'auteur an earwig | 2015-03-26

responsive-design twitter-bootstrap

6

L'iPhone5 largeur est 1136px ainsi, l'ajout de hidden-sm aussi, ne vont pas aider. Vous aurez besoin d'ajouter des media query pour masquer la .main comme ceci:
```
@media (max-width: 1199px) {
    .main {
        display: none;
    }
}
@media (min-width: 1200px) {
    .main {
        display: block;
    }
}
```
MAIS il y a beaucoup de personnes qui utilisent des Pc et ordinateurs Portables avec un écran d'une largeur de cette zone de sorte que vous pourriez finir par cacher la div pour eux aussi.

Si vous voulez cacher la div sur les Téléphones/Tablettes ayant une grande largeur, alors vous pourriez avoir à aller avec la vieille école user-agent dispositif de détection de l'approche qui consiste à utiliser du JavaScript pour vérifier si l'appareil est un Téléphone/Tablette ou pas.

Aussi, comme Kyle mentionné ci-dessus, vous devez définir votre main classe ainsi que votre hidden-xx classe de requête ensemble comme ceci:
```
<div class="main hidden-xs">
```
OriginalL'auteur AndrewL64
6

Il y a deux problèmes ici:
1. Est que le jsFiddle ne comprend pas la balise fenêtre de sorte que le dispositif d'émulation de ne pas essayer de redimensionner la fenêtre d'affichage. Sans cela, vous ne pouvez pas profiter de Bootstrap est sensible de la taille des classes. Assurez-vous d'inclure les informations suivantes dans le premier élément de votre élément de tête:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
  Voici un plunker qui comprend un exécutable exemple
2. L'autre problème, c'est que vous avez class définies deux fois, en vous div principale:
```
<div class="main" class="hidden-xs">
```
  Donc, si vous inspecter l'élément, vous aurez fait remarquer que la seconde classe est ignoré et vous ne tirez jamais dans hidden-xs. Au lieu de les ajouter à la fois séparés par un espace comme ceci:
```
<div class="main hidden-xs">
```
Maintenant, il devrait fonctionner correctement:

Ne fonctionne pas :(.
ce n'est pas très descriptif et utile. Tu veux dire à l'aide de l'émulateur? Sur un périphérique réel? À l'aide du lien que j'ai fourni? Faire les modifications vous-même? Les deux choses que j'ai souligné étaient certainement entraver ce travail. Quand ils s'éclaircit, il a travaillé pour moi. Si vous êtes en utilisant Bootstrap vous avez besoin de la balise meta "viewport", afin de faire semblant il y a plus de pixels et de l'écriture CSS personnalisé pour les classes qui sont déjà fourni n'est pas très stable en solution.

OriginalL'auteur KyleMit
0

essayer cette ajouter cette css :
```
@media (max-width:767px){.hidden-xs{display:none!important}}
```
OriginalL'auteur Bruno Ribeiro

Vous devez vous connecter pour publier un commentaire.