2016-11-25 1 views
1

Ich versuche, die Bootstrap-Größe (xs/sm/md/lg) zu erkennen.Get Bootstrap Größe ist undefined

habe ich versucht, diese Links:

Leider

Die Antworten habe ich haben "Bug" gefunden oder so ähnlich.

Wenn Sie die Bootstrap-Größe bei Fenstergröße-Ereignis protokollieren, würden Sie sehen, dass Sie manchmal nicht definiert protokollieren.

Es passiert, wenn Sie die Größe des Fensters von Bootstrap Größe eins zu Bootstrap Größe zwei ändern.

Zum Beispiel, wenn Sie die Größe von xs zu sm ändern.

+0

da ohne eine Anpassung des Bootstrap die Größen immer gleich sind und es nur vier gibt, eine endliche Zahl, würden die Werte in einem Switch-Fall basierend auf der Bootstrap-Größe hart eine Kodierung nicht eine Option sein? – WEBjuju

+0

etwas wie: if (window.innerWidth <768) { return 'xs'; } sonst if (window.innerWidth <992) { return 'sm'; } sonst if (window.innerWidth <1200) { return 'md'; } sonst { zurück 'lg'; } ? –

+0

vielleicht verstehe ich nicht, was Sie versuchen zu tun. bist du der Codierer des von dir geteilten Codepens und versuchst ihn zu erweitern, um nicht nur die xs/sm/md/lg, sondern auch die maximale Breite anzuzeigen? Wenn nicht, erstellen Sie gerade Ihre eigene Seite, auf der Sie die aktuelle Bootstrap-Größe kennen müssen? wenn letzteres, was hat die maximale Pixelbreite damit zu tun? – WEBjuju

Antwort

0

Wenn Sie this library enthalten können Sie eine Funktion wie folgt ausführen:

<script> 
(function($, document, window, viewport){ 

    // Executes once whole document has been loaded 
    $(document).ready(function() { 
    console.log('Current breakpoint:', viewport.current()); 
    }); 

    $(window).resize(
    viewport.changed(function(){ 
     console.log('Current breakpoint:', viewport.current()); 
    }) 
); 

})(jQuery, document, window, ResponsiveBootstrapToolkit); 
</script> 

Das Problem scheint zu sein, dass die Dokumentation nicht klar genug über ResponsiveBootstrapToolkit Scoping, wie oben zu sehen Ansichtsfenster.

+0

Es funktioniert nicht. Wenn Sie die Bootstrap-Größe (xs/sm/md/lg) im Fenster resize-Ereignis protokollieren, würden Sie sehen, dass Sie manchmal nicht definiert protokollieren. Dies passiert, wenn Sie das Fenster von Bootstrap-Größe eins auf Bootstrap-Größe zwei skalieren. Zum Beispiel, wenn Sie die Größe von xs zu sm ändern. –

+0

Okay, ich habe Ihr Problem lokal reproduziert; Sie können die JS innerhalb der