col-xs-0 ne fonctionne Pas Bootstrap

Quand j'imiter mes paramètres de mobile pour mon site, les icônes sociaux devraient avoir disparu; cependant, ils restent. J'ai essayé de mettre col-xs-0 dans la je les cadres eux-mêmes, et rien.

Voici l'image: col-xs-0 ne fonctionne Pas Bootstrap

Voici mon pied de page HTML.

<footer>
    <div class="container-fluid">
            <div class="row">
                <div class="col-xs-0 col-md-2 pull-right footersocial">
                    <a href="#" target="_blank"><i class="fa fa-facebook-official fa-3x socialicons"  aria-hidden="true"></i></a>
                    <a href="#" target="_blank"><i class="fa fa-twitter fa-3x socialicons" aria-hidden="true"></i></a>
                    <a href="#" target="_blank"><i class="fa fa-instagram fa-3x socialicons" aria-hidden="true"></i></a>
                </div>
            </div>
        <div class="row" style="margin-left: 15px; margin-top: 15px;">
            <div class="col-md-2 text-center">
                <p>Privacy Policy</p>
            </div>
            <div class="col-md-2 text-center">
                <p>Terms of Service</p>
            </div>
            <div class="col-md-2 text-center">
                <p>Acceptable Use Policy</p>
            </div>
            <div class="col-md-2 text-center">
                <p>Warranty & Returns Policy</p>
            </div>
            <div class="col-md-2 text-center">
                <p>Third Party Copyright Notices</p>
            </div>
            <div class="col-md-2 text-center">
                <p>Terms of Service for Phone</p>
            </div>
        </div>
    </div>
</footer>

Mon CSS:

.socialicons {
    color: white;
    margin-right: 10px;
    margin-top: 10px;
    margin: 0 auto;
    display: block;
}
.footersocial {
  margin: 0 auto;
  display: block;
}
.col-xs-0 {
    display: none;
}
  • Le col-md-2 est sans doute primordial personnalisé de votre code CSS avec display:block. Cela peut se produire si vous indiquez votre code CSS avant la bootstrap.css ou il pourrait être en raison de la spécificité des raisons. Il ya des façons de rendre votre code CSS personnalisé plus précis, de sorte qu'elle ne soit pas remplacée. Mais la meilleure option est d'utiliser hidden-xs comme Praveen la réponse dit.
InformationsquelleAutor Thomas Hutton | 2016-12-29
  1. 31

    Vous devez utiliser hidden-xs à masquer le bloc dans l'affichage mobile ou xs (très petit) vues:

    <div class="hidden-xs col-md-2 pull-right footersocial">
    • Intéressant. Curieusement, je n'ai jamais utilisé qu'avant; je pense que je vais peut-être.
    InformationsquelleAutor Praveen Kumar Purushothaman
  2. 3

    J'ai juste fait:

    .col-xs-0, 
.col-sm-0,
.col-md-0,
.col-lg-0 {
  flex: 0 0 0;
  max-width: 0;
}

    Que mon but était de faire de glissement de l'animation "de nulle part" et il a bien fonctionné pour moi!

    InformationsquelleAutor JuliaCrush
  3. 1

    Dans le Bootstrap 4 vous pouvez utiliser:

    .d-aucune .d-{taille de l'écran}-bloc

    pour masquer un élément en fonction de la taille de l'écran (xs, sm, md, etc)

    Documentation : ici

    InformationsquelleAutor RoRFan
  4. 0

    La réponse de JuliaCrush est agréable, mais vous devez ajouter rembourrage:

    donc:

    .col-xs-0, 
.col-sm-0,
.col-md-0,
.col-lg-0 {
  flex: 0 0 0;
  max-width: 0;
  padding-right: 0;
  padding-left: 0;
}

    Si non, vous aurez toujours une petite colonne en raison de la marge. À l'aide de d-aucun n'est privilégié, mais je ne pouvais pas animer montrant la colonne de basculement d-aucun avec jquery laisse un style="visibility:none".

    InformationsquelleAutor Ken Veys