So machen Sie Bootstrap "Cards" Responsive
Bootstrap bietet kürzlich eine Funktion namens "Cards", alles ist cool, bis es das 747px-Ansichtsfenster erreicht. Siehe Bild unten.
Da Sie sehen können, dass alles versaut ist, passt der Container nicht. Gibt es eine CSS-Korrektur, die wir tun können, um sicherzustellen, dass sie von 747px und darunter gut aussehen ???
Hier ist mein HTML:
%Vor%Sieh dir meinen JSFIDDLE an: Ссылка
Irgendeine Idee ??? Wie behebe ich das?
4 Antworten
Wenn Sie nur von Bildern sprechen, die nicht zum enthaltenen div passen, fügen Sie einfach
hinzu %Vor% zu den Bildern, die Sie benötigen oder die Klasse img-responsive
Codepen Ссылка
Genauer gesagt
%Vor% Auch für das conatiner div, wenn Sie es in voller Breite benötigen, fügen Sie einfach <div class="container-fluid">
Sie sollten genauer spezifizieren, was Sie brauchen, aber ich denke, das hilft:
%Vor%%Vor%
...
Sie können auch Ihre HTML aktualisieren:
%Vor% Überprüfen Sie dies für alle Bildschirmgrößen lg , md , sm und xs
HTML
%Vor%CSS
%Vor%Und wenn es nur das Problem des Bildes gibt, dann füge dieses hinzu
%Vor% füge die Klasse .img-fluid zu deinem Bild hinzu. Es funktioniert.
Tags und Links html css twitter-bootstrap