Ich benutze twitter bootstrap die Eingabe-LG-Klasse für alle meine Eingaben. Gibt es eine (vielleicht Javascript) Möglichkeit, dies durch Twitter-Bootstrap die Eingabe-sm auf kleineren Bildschirmen zu ersetzen, so dass die Schriftgröße, Höhe, Zeilenhöhe und Padding auf der Eingabe wird der Bootstrap-Weg "schrumpfen"? Oder wird es einfacher sein, die Medien-Anfragen selbst zu erledigen?Bootstrap3 Ersetzen Eingabe-lg mit Eingabe-sm auf kleinen Bildschirmen
Die JavaScript (jQuery) Art und Weise so etwas würde (zB) (nicht geprüft):
$(window).resize(function() {
if ($(window).width() < 768) {
$("input").addClass("input-sm");
}
else if ($(window).width() >= 768 && $(window).width() <= 992) {
$("input").removeClass("input-sm");
$("input").removeClass("input-lg");
}
else if ($(window).width() > 992 && $(window).width() <= 1200) {
$("input").addClass("input-lg");
}
else {
// do something greater screen sizes if you want
}
});
denke ich, dass eine bessere Lösung wäre, denn mit Ihren eigenen Medien-Anfragen schreiben Sie einfach kopieren Bootstraps CSS für diese bestehenden Klassen ... Aber wenn Sie das bevorzugen, wird this post ein guter Anfang sein.
Genau das, was ich brauchte. Danke vielmals. Danke auch für die Bonus-Bildschirmgrößen, obwohl ich für nur 768 benötigt habe. siehe meine Bearbeitung. – Sam
Ja, benutze es wie du willst. Ihre Bearbeitung kann als zusätzliche Antwort gepostet werden, da sie einige Bildschirmgrößen entfernt - diese Lösung ist etwas allgemeiner. – andreas
Sie würde nur die Eingabe-sm-Klasse hinzufügen zusammen mit dem Eingang lg, dass Sie haben zB: wenn Sie haben Sie es so dass es sich nach dem Bildschirm, den Sie verwenden, anpasst. Es ist bereits Javascript in der bootstrap.js Datei geschrieben. hoffe das hilft! –
@ PrashanthBenny, soweit ich weiß, dies betrifft nur die Breite der Eingabeelemente, aber weder Höhe noch Zeilenhöhe noch Schriftgröße ... – andreas
@PrashanthBenny das sind für Raster – Sam