Html Bootstrap 可见类和隐藏类无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20354908/
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
Bootstrap visible and hidden classes not working properly
提问by Jane
I tried to use the Bootstrap visibleand hiddenclasses to create content only visible on mobile/desktop. I noticed the classes weren't working properly (and I have noticed a lot of people had this problem and solved it this way) so I created a mobile stylesheet to set which of the divs to show on mobile.
我尝试使用 Bootstrapvisible和hidden类来创建仅在移动/桌面上可见的内容。我注意到这些类工作不正常（我注意到很多人都有这个问题并通过这种方式解决了它）所以我创建了一个移动样式表来设置要在移动设备上显示的 div。
This is my current code:
这是我当前的代码：
<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
</div>
</div>
</div>
<div class="mobile">
test
</div>
Now the .mobileshould be visible on mobile screens, 900px width, and smaller. I used the Bootstrap classes for the other div, .containerdiv, and that works so far, but only when I added a value for hidden-xsin my own mobile CSS sheet, like so;
现在.mobile应该在移动屏幕上可见，宽度为 900 像素，并且更小。我对另一个 div 使用了 Bootstrap 类，.containerdiv到目前为止，它有效，但只有当我hidden-xs在我自己的移动 CSS 表中添加一个值时，就像这样；
.hidden-xs {
display:none !important;
}
.mobile {
display:block !important;
}
The .mobilediv should now show up on screens 900px or smaller but it still doesn't. I'm not sure why it doesn't, display:blockis the right thing to use right? Adding visible-xsand visible-smdoes nothing.
该.mobileDIV应该会显示在屏幕上900px或更小，但它仍然没有。我不确定为什么它不display:block正确，使用正确的东西是正确的吗？添加visible-xs并且visible-sm什么也不做。
What is the proper way to do this and why is my version not working?
这样做的正确方法是什么，为什么我的版本不起作用？
采纳答案by Graham Langdon
Your .mobilediv has the following styles on it:
您的.mobilediv 具有以下样式：
.mobile {
display: none !important;
visibility: hidden !important;
}
Therefore you need to override the visibilityproperty with visiblein addition to overriding the displayproperty with block. Like so:
因此，除了使用 覆盖属性之外，您还需要覆盖该visibility属性。像这样：visibledisplayblock
.visible-sm {
display: block !important;
visibility: visible !important;
}
回答by Adarsh Gowda K R
No CSS required, visible class should like this: visible-md-blocknot just visible-mdand the code should be like this:
不需要CSS，可见类应该是这样的：visible-md-block不仅仅是visible-md，代码应该是这样的：
<div class="containerdiv hidden-sm hidden-xs visible-md-block visible-lg-block">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
</div>
</div>
</div>
<div class="mobile hidden-md hidden-lg ">
test
</div>
Extra css is not required at all.
根本不需要额外的css。
回答by simranjit
If you give display table property in css some div bootstrap hidden class will not effect on that div
如果您在 css 中提供 display table 属性，则某些 div bootstrap 隐藏类将不会影响该 div
回答by Jop
Your mobile class Isn't correct:
您的移动课程不正确：
.mobile {
display: none !important;
visibility: hidden !important; //This is what's keeping the div from showing, remove this.
}
回答by jriver27
As of today November 2017
Bootstrap v4 - beta
截至今天 2017 年 11 月
Bootstrap v4 - 测试版
Responsive utilities
响应式实用程序
All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.
在 v4.0.0 中删除了所有 @screen- 变量。改用 media-breakpoint-up()、media-breakpoint-down() 或 media-breakpoint-only() Sass mixins 或 $grid-breakpoints Sass 映射。
Removed from v3: .hidden-xs .hidden-sm.hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
从 v3 中删除：.hidden-xs .hidden -sm.hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm -inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
从 v4 alphas 中删除： .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-降级
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
