Html bootstrap hidden-xs 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40052810/
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 hidden-xs not working
提问by BeniaminoBaggins
I just found out about hidden-xs, hidden-sm etc, so am trying it out for the first time..
我刚刚发现了 hidden-xs、hidden-sm 等，所以我是第一次尝试。
How come this doesn't hide the review div on any screen size?
为什么这不会在任何屏幕尺寸上隐藏评论 div？
<div class="row hidden-sm">
<div class="col-xs-12">
<result-reviews [result]='selectedResult?.result.result'></result-reviews>
</div>
</div>
Here is more of my code:
这是我的更多代码：
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-lg-7">
<div class="row">
<div id="image-div" class="col-sm-5 col-lg-5">
<result-image [result]='selectedResult?.result.result'></result-image>
</div>
<div class="col-sm-7 col-lg-7">
<result-attributes [result]='selectedResult?.result.result'></result-attributes>
</div>
</div>
<div class="row hidden-sm">
<div class="col-xs-12">
<result-reviews [result]='selectedResult?.result.result'></result-reviews>
</div>
</div>
</div>
<div class="col-lg-5">
<div id="shops-section">
<div id="map" #map></div>
<ul>
<li *ngFor="let shop of selectedResult?.result.result.nearbyShops">
<div class="shop-details">
{{ shop.name }}
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
回答by Christoph Muth
Which version of bootstrap are you using? In the bootstrap 4 alpha the hidden-xs classes (and sm, md, ...) have been replaced by hidden-xs-up or hidden-xs-down as explained here: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
您使用的是哪个版本的引导程序？在 bootstrap 4 alpha 中，hidden-xs 类（以及 sm、md、...）已被 hidden-xs-up 或 hidden-xs-down 替换，如下所述：http: //v4-alpha.getbootstrap.com /布局/响应式实用程序/
回答by Johannes
How come this doesn't hide the review div on any screen size?
为什么这不会在任何屏幕尺寸上隐藏评论 div？
Read this part of the bootstrap documentation: http://getbootstrap.com/css/#responsive-utilities-classes
阅读引导程序文档的这一部分：http: //getbootstrap.com/css/#responsive-utilities-classes
hidden-smwill only apply to sizes between 768 and 992px width.
hidden-sm仅适用于 768 到 992 像素宽度之间的尺寸。
回答by Anushka Panagar
It works with d-none d-sm-block!Try this if you want to hide the division.
d-none d-sm-block!如果您想隐藏分区，请尝试此操作。
For reference, this is the link Getbootstrap Migration
作为参考，这是链接Getbootstrap Migration
回答by daGo
Since bootstrap v.4.0 (stable)
自引导程序 v.4.0（稳定）
All @screen- variables have been removedin 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 映射。
