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

Answer 1

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

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

Answer 2

我刚刚做了：

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

我的目标是“从无处”制作滑动动画，它对我来说很好用！

Answer 3

在Bootstrap 4中，您可以使用：

.d-none .d- {screen size} -block

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

文档：here

Answer 4

JuliaCrush的答案很好，但是您必须添加填充：

如此：

.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;
}

如果没有，由于填充，您将仍然有一小列。首选使用d-none，但是随后我无法为显示该列设置动画，因为使用jquery切换d-none会留下style =“ visibility：none”。

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

4 个答案: