Comment masquer/supprimer une classe basée sur Bootstrap media query points d'arrêt?

Est-il possible d'afficher/masquer une classe basée sur la taille de l'écran de l'appareil?
Je suis en utilisant bootstrap par défaut des requêtes de média. J'ai cette configuration par défaut:

/* Bootstrap Media Query Breakpoints

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {...}

/* Extra Small Devices, Phones equivalent to class xs */ 
@media only screen and (min-width : 480px) {...}

/* Small Devices, Tablets equivalent to class sm */
@media only screen and (min-width : 768px) {...}

/* Medium Devices, Desktops equivalent to class md */
@media only screen and (min-width : 992px) {...}

/* Large Devices, Wide Screens equivalent to class lg */
@media only screen and (min-width : 1200px) {...}

J'ai un div qui comme ceci:

<div class="col-xs-12 ol-sm-6 col-md-6">

  <div class="pull-right">

    <ul class="header_links">
      <li>
        <a href="#">Member</a>
      </li>
      <li>
        <a href="#">Login</a>
      </li>
      <li>
        <a href="#">Member Registration</a>
      </li>
      <li>
        <a href="#">Help</a>
      </li>
      <li>
        <a href="#">Cart: 0</a>
      </li>
    </ul>

    <ul class="social_media_links">
      <li>
        <a href="#">
          <i class="fa fa-facebook-square"></i>
        </a>
      </li>
       <li>
        <a href="#">
          <i class="fa fa-tumblr-square"></i>
        </a>
      </li>
    </ul>

  </div>
  <div class="clearfix"></div>

</div>

Ce que je veux, c'est si la requête de média est dans le col-xs-# la classe pull-droit seront masqués ou supprimés.
Est-il possible dans le bootstrap?

La meilleure façon de comprendre le Bootstrap est d'ouvrir le unminified css. Dans le cas d' .pull-gauche .pull droit, et toutes les classes utilitaires (à l'exception de la réactivité des services publics), ils sont pour toutes les tailles de fenêtre de la. Si vous combinez .pull droit ET hidden-xs sur le même élément <p class="pull-right hidden-xs", puis il va se cacher au max-width 767px

OriginalL'auteur Jerielle | 2014-11-25

8

Bootstrap a intégré les classes utilitaires pour cacher\affichage de contenu basée sur la fenêtre d'affichage.

http://getbootstrap.com/css/#responsive-utilities

.visible-xs-* et .hidden-xs (* = block, inline-block ou inline)

MODIFIER

Vous ne serez pas en mesure de remplacer .pull-right car il utilise !important, et elle ne s'applique qu'une seule règle (float: right;), de sorte que son assez facile de recréer une classe personnalisée.
```
.pull-right-custom {
    float: right;
}

@media only screen and (max-width : 480px) {
    .pull-right-custom {
        float: none;
    }
}
```
Edit #2

Si vous souhaitez conserver avec les mobiles de la nature de bootstrap, il devrait ressembler à ceci.. le sm indiquerait qu'il tire à droite sur sm ou les grandes fenêtres de visualisation (pour la sémantique).
```
.pull-right-sm {
    float: none;
}

@media only screen and (min-width : 480px) {
    .pull-right-sm {
        float: right;
    }
}
```
C'est la division du contenu. Mais je veux accéder à un nom de classe à l'aide de points d'arrêt
Ces utilitaires ne contrôle la visibilité de l'élément qu'ils sont incapables d'ajouter ou de supprimer le "pull-right" classe de l'intérieur de la div que le post original est demandé. Vous devez utiliser un support personnalisé requête comme indiqué dans une autre réponse ici ou à l'utilisation de javascript/jquery pour gérer ça, mais la requête de média approche est plus facile.
ma plus récente mise à jour est un peu mieux (mobile-première et un peu plus de sémantique), donc je voudrais l'utiliser.

OriginalL'auteur Schmalzy
1

De masquer ou de supprimer n'est pas possible, mais vous pouvez changer la façon dont sera rendu

@media screen and (max-width : 480px) { .pull-droite {float:none;}}

Donc, de cette manière, tous les médias de l'écran de moins de 480px, cette classe ne sera pas rendu avec float:right.

visible-xs est une solution bien meilleure que celle fournie par bootstrap. Cependant, votre réponse semble être une solution unique.
le .pull-right classe avait !important appliqué, de sorte que vous ne serez pas en mesure de le remplacer.
Merci. C'est ce que je pense maintenant. Donc la seule façon que je peux supprimer la classe est de modifier la CSS principale fonction de ce point d'arrêt j'en ai besoin?

OriginalL'auteur Luis Carlos
0

Je pense que la bonne façon de le faire est d'utiliser Bootstrap est sensible utilitaires.

Prendre un coup d'oeil à la le code source de visibilité mixin définition comme référence, vous pouvez les utiliser pour étendre vos propres classes, comme:
```
/* make sure that you've imported Bootstrap */
@import "bootstrap/less/bootstrap.less";

.pull-right-custom {
  .pull-right; /* to make element behave exactly like .pull-right; */
  .visible-xs-block; /* to make element visible only on extra-small screens, etc... */
}
```
Ou si vous utilisez précompilés ou certains CDN-version partagée de Bootstrap, il suffit d'ajouter ce classes directement dans votre code html comme ceci:
```
<div class="pull-right visible-xs-block">
  ...
</div>
```
OriginalL'auteur Dan K.K.

Vous devez vous connecter pour publier un commentaire.