我正在嘗試轉換這行影像...
將其轉換成一個小輪播，以便在小型設備（回應式設計）中進行可視化，我正在使用引導程式，該影像的代碼在這里：
<div class="row d-flex justify-content-center pb-5" style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
<img src="assets/img/TheEye.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
<img src="assets/img/ThePyramid.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
<img src="assets/img/TheEthernal.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
</div>
我希望當設備像手機一樣小時，這個 div 將自己轉換為輪播以獲得更好的可視化
uj5u.com熱心網友回復：
將類
d-block和添加d-md-flex到您的容器為移動設備上的輪播功能創建一個新容器。
最終html代碼：
<div class="row d-none d-md-flex justify-content-center pb-5" style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
<img src="assets/img/TheEye.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
<img src="assets/img/ThePyramid.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
<img src="assets/img/TheEthernal.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
</div>
<div id="carouselExampleSlidesOnly" class="carousel slide d-block d-md-none" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/TheEye.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/ThePyramid.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/ThePyramid.png" alt="Third slide">
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/431651.html