twitter-bootstrap col-xs-0 不工作引导
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/41388375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
col-xs-0 Not Working Bootstrap
提问by Thomas Hutton
When I emulate my mobile settings for my site, the social icons should be gone; however, they stay. I have tried putting col-xs-0in the i frames themselves, and nothing.
当我为我的网站模拟我的移动设置时,社交图标应该消失了;然而,他们留下了。我试过自己放入col-xs-0i 框架,但没有。
Here's my footer HTML.
这是我的页脚 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>
My CSS:
我的 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;
}
回答by Praveen Kumar Purushothaman
回答by RoRFan
回答by JuliaCrush
I just did:
我已经做了:
.col-xs-0,
.col-sm-0,
.col-md-0,
.col-lg-0 {
flex: 0 0 0;
max-width: 0;
}
As my goal was to make sliding animation "from nowhere" and it worked fine for me!
因为我的目标是“从无到有”制作滑动动画,它对我来说效果很好!
回答by Ken Veys
The answer of JuliaCrush is nice, but you have to add padding:
JuliaCrush 的答案很好,但您必须添加填充:
so:
所以:
.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;
}
If not, you will still have a small column because of the padding. Using d-none is preferred, but then I could not animate showing the column as toggling d-none with jquery leaves a style="visibility:none".
如果没有,由于填充,您仍然会有一个小列。首选使用 d-none,但随后我无法动画显示列,因为使用 jquery 切换 d-none 会留下 style="visibility:none"。


