2016-10-14 2 views
3

Arbeits Ich habe gerade herausgefunden über versteckte-xs, versteckt-sm etc, so dass er versuchen, zum ersten Mal heraus ..Bootstrap-hidden-xs nicht

Wie dies kommt nicht die Überprüfung div auf jedem verstecken Bildschirmgröße?

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

ist hier mehr meines 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> 

Antwort

1

Wie kommt dies nicht die Überprüfung div auf jeder Bildschirmgröße nicht verbergen?

diesen Teil der Bootstrap-Dokumentation lesen: http://getbootstrap.com/css/#responsive-utilities-classes

hidden-sm nur zwischen 768 und 992px Breite Größen gelten.

+0

Aber es wird nie auf jeder Bildschirmgröße versteckt. Ich habe auch hidden-xs hidden-md usw. hinzugefügt und alle Bildschirmgrößen getestet, indem ich die Größe des Browserfensters änderte und keine versteckten. – BeniaminoBaggins

+0

nun, es funktioniert * wie beabsichtigt hier: http://codepen.io/anon/pen/ALgJdm Das ist * dein * Code, mit der einzigen Änderung, die ich Klasse 'x' zu deiner' hidden-sm' hinzugefügt habe div, um es deutlicher zu machen (als Ed-Rechteck). Wenn Sie die Fenstergröße ändern, wird das rote Rechteck verschwinden, wenn die Breite zwischen 768 und 992px liegt. – Johannes

+0

Ja. Irgendetwas stimmt nicht mit meinem Bootstrap. Aber es ist seltsam, weil ich es für eine ganze 4 Website-Seiten verwendet habe, wie alles richtig funktioniert außer für versteckt. Ich bin Bootstrap über bower_components installiert. Ich versuche stattdessen ein CDN zu verwenden und es wird nicht richtig Bootstrap. – BeniaminoBaggins

0

Es arbeitet mit d-none d-sm-block! Versuchen: In der Alpha-Bootstrap-4 sind die versteckten xs Klassen (und sm, md, ...) durch hidden-xs-up oder versteckten xs-down wie hier erklärt ersetzt worden dies, wenn Sie die Abteilung verstecken wollen.

als Referenz, das ist der Link Getbootstrap Migration