reaktions volle Breite Bootstrap-Karussell mit kleinen Bild auf der linken Seite und Beschriftung auf der rechten

Question

, was ich hier zu tun versuche Beispiel ist in Geige

I .carousel-inner{min-widt=500px;} für große Bildschirmgröße haben (ich es reagiert, wollen aber)

Jetzt ist mein Problem, ich möchte erste Karussell Slider-Bild in der Mitte-links-Position von meinem Karussell von oben und unten sein. und Beschriftung ist auf der rechten Seite Mitte und Viz.

Ich habe diesen Code versucht ... aber wenn ich auf kleinere Geräte gehe, geht die Bilder auf die Beschriftung.

https://jsfiddle.net/xe05ro61/4/

Answer 1

Sie haben soeben Breite hinzufügen: 100%; von deinem bild, ich denke dann, nachdem dein problem gelöst ist.

Versuchen unter css:

Css:

.item img { 
    width: 100%; 
} 

Siehe Fiddle Demo Link

Answer 2

Sie werden oft spezifische CSS-Regeln für den kleinen Bildschirm verwenden müssen, um Ihre Website zu jedem Browser Größe anzupassen. Um dies zu erreichen, verwenden Sie @media. Um eine CSS-Regel zu definieren, die nur Bildschirm mit einer Breite unter 640 px Ziel werden, verwenden:

.myclass{ 
    background:red; 
    } 
@media screen and (max-width: 640px) { 
.myclass{ 
    background:green; 
    } 
} 

Auf dem PC-Bildschirm, werden Sie einen roten Hintergrund erhalten, auf kleinen Handy-Display, ein grünen.

Ersetzen Sie jetzt diese unbrauchbare Farbdefinition durch Ihre Positionsregeln.