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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:28:56  来源:igfitidea点击:

col-xs-0 Not Working Bootstrap

htmlcsstwitter-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 the picture: enter image description here

这是图片: 在此处输入图片说明

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

You should use hidden-xsto hide the block in the mobile view or xs(extra small) views:

您应该使用hidden-xs在移动视图或xs(超小)视图中隐藏块:

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

回答by RoRFan

In Bootstrap 4 you can use:

在 Bootstrap 4 中,您可以使用:

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

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

to hide an element depending on the size of the screen (xs, sm, md etc)

根据屏幕大小(xs、sm、md 等)隐藏元素

Documentation : here

文档:这里

回答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"。