बूटस्ट्रैप 4 कैरोसेल छवियों को उत्तरदायी बनाने के लिए कैसे?

Question

उम्मीद है कि शीर्षक और डेमो यह सब कहते हैं। बूटस्ट्रैप 4 का नया कैरोसेल उत्तरदायी नहीं है। छवियां उनके पहलू अनुपात से बाहर हैं।

क्या कोई जानता है कि सीएसएस और एचटीएमएल में बड़े समायोजन किए बिना इसे कैसे हल किया जाए?

.wrapper { 
 
    max-width:200px; 
 
    width:100%; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="wrapper"> 
 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="carousel-item active"> 
 
     <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="First slide"> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Second slide"> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Third slide"> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

आप एक आवरण या ऐसा ही कुछ जरूरत नहीं है। .active। कैरोसेल-आइटम के लिए डिफ़ॉल्ट स्टाइल प्रदर्शित है: फ्लेक्स।

आप अपने कस्टम सीएसएस के लिए

.carousel-item.active, 
.carousel-item-next, 
.carousel-item-prev { 
    display: block; 
} 

जोड़ने की आवश्यकता होगी।

Answer 2

बस इस bellow सीएसएस,

<style> 
.wrapper { 
    max-width:200px; 
    width:100%; 
} 
.carousel-item-next, .carousel-item-prev, .carousel-item.active { 
    display: block !important; 
} 
</style> 

मैं आशा है कि यह ठीक से काम करेंगे ...