col-xs-0 引导程序不工作

Question

当我为我的网站模拟我的移动设置时，社交图标应该消失了；然而，他们留下来了。我试过将 col-xs-0 放入 i 帧本身，但什么也没有。

这是图片：

这是我的页脚 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>

我的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;
}

原文由 Thomas Hutton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该使用 hidden-xs 在移动视图或 xs （超小）视图中隐藏块：

 <div class="hidden-xs col-md-2 pull-right footersocial">

原文由 Praveen Kumar Purushothaman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 Bootstrap 4 中，您可以使用：

.d-无 .d-{屏幕尺寸}-块

根据屏幕大小隐藏元素（xs、sm、md 等）

文档： 这里

原文由 RoRFan 发布，翻译遵循 CC BY-SA 4.0 许可协议