web-dev-qa-db-fra.com

bootstrap hidden-xs ne fonctionne pas

Je viens de découvrir Caché-xs, caché-sm, etc., donc je l'essaie pour la première fois.

Comment se fait-il que cela ne cache pas l'avis div sur n'importe quelle taille d'écran?

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

Voici plus de mon 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>
htmlcsstwitter-bootstrapangular
4
BeniaminoBaggins

Quelle version de bootstrap utilisez-vous? Dans le bootstrap 4 alpha, les classes hidden-xs (et sm, md, ...) ont été remplacées par hidden-xs-up ou hidden-xs-down, comme expliqué ici: http: // v4-alpha.getbootstrap.com/layout/responsive-utilities/

4
Christoph Muth

Comment se fait-il que cela ne cache pas l'avis div sur n'importe quelle taille d'écran?

Lisez cette partie de la documentation de bootstrap: http://getbootstrap.com/css/#responsive-utilities-classes

hidden-sm ne s'appliquera qu'aux tailles comprises entre 768 et 992px.

2
Johannes

Cela fonctionne avec d-none d-sm-block! Essayez ceci si vous voulez masquer la division.

Pour référence, il s’agit du lien Migration Getbootstrap

2
Anushka Panagar

Depuis bootstrap v.4.0 (stable)

Toutes les variables @ screen-ont été supprimées dans v4.0.0. Utilisez plutôt les mixins Sass de media-breakpoint-up (), media-breakpoint-down () ou media-breakpoint-only (), ou la carte Sass $ grid-breakpoints.

0
daGo