Question

我刚刚发现了hidden-xs，hidden-sm等，所以我第一次尝试了..

为什么这不会隐藏任何屏幕尺寸的评论div？

<div class="row hidden-sm">
   <div class="col-xs-12">
      <result-reviews [result]='selectedResult?.result.result'></result-reviews>
   </div>
</div>

以下是我的更多代码：

<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>

Answer 1

您使用的是哪个版本的bootstrap？在bootstrap 4 alpha中，hidden-xs类（以及sm，md，...）已被hidden-xs-up或hidden-xs-down取代，如下所述： http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Answer 2

为什么这不会隐藏任何屏幕尺寸的评论div？

阅读引导文档的这一部分：http://getbootstrap.com/css/#responsive-utilities-classes

hidden-sm仅适用于768和992px宽度之间的尺寸。

Answer 3

适用于d-none d-sm-block!如果您想隐藏分部，请尝试此操作。

供参考，这是链接Getbootstrap Migration

Answer 4

自bootstrap v.4.0（稳定）

v4.0.0中的所有@ screen-变量已被删除。使用media-breakpoint-up（），media-breakpoint-down（）或media-breakpoint-only（）Sass mixins或$ grid-breakpoints Sass map。

bootstrap hidden-xs无效

4 个答案: