web-dev-qa-db-ja.com

bootstrap非表示-xsが機能しない

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>
htmlcsstwitter-bootstrapangular
5
BeniaminoBaggins

どのバージョンのbootstrapを使用していますか？bootstrap 4 alphaでは、hidden-xsクラス（およびsm、md、...）はに置き換えられましたここで説明されているhidden-xs-upまたはhidden-xs-down： http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

7
Christoph Muth

どうしてこれがどの画面サイズでもレビューdivを隠さないのですか？

bootstrapドキュメントのこの部分を読んでください： http://getbootstrap.com/css/#response-utilities-classes

hidden-smは、幅768〜992pxのサイズにのみ適用されます。

2
Johannes

d-none d-sm-block!分割を非表示にする場合は、これを試してください。

参考までに、これはリンクです Getbootstrap Migration

2
Anushka Panagar

bootstrap v.4.0（安定版）以降

すべての@ screen-変数はv4.0.0で削除になっています。代わりに、media-breakpoint-up（）、media-breakpoint-down（）、media-breakpoint-only（）Sassミックスインまたは$ grid-breakpointsSassマップを使用してください。

0
daGo