col-xs-0 Not Working Bootstrap

当我模拟我的网站的移动设置时，社交图标应该消失;但是，他们留下来。我曾尝试将col-xs-0放入i帧本身，但没有任何结果。col-xs-0 Not Working Bootstrap

这里的图片：

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

来源

2016-12-29 Thomas Hutton

'col-md-2'可能会用'display：block'覆盖你的自定义CSS代码。如果你在'bootstrap.css'之前加入了你的CSS代码，或者这可能是由于特殊原因，这可能会发生。有很多方法可以使您的自定义CSS代码更加具体，从而不会被覆盖。但更好的选择是使用'hidden-xs'作为Praveen的答案。 –

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

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

来源

2016-12-29 23:02:24

有趣。奇怪的是，我从来没有使用过，我想我可能会。 –

在引导4您可以在可以使用：

.d-none .d- {屏幕尺寸} - 嵌段

隐藏取决于屏幕的尺寸（XS，SM，MD等）的元素

文档：https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

来源

2018-01-04 16:47:27 RoRFan

我只是做：

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

由于我的目标是使滑动动画“从无处”，它为我工作得很好！

来源

2018-01-14 18:07:54 JuliaCrush

col-xs-0 Not Working Bootstrap

回答

相关问题