Bootstrap從API水平對齊數據

Question

我有一個carousel並且在該carousel有卡片，每張卡片至少應與它水平對齊，但就我而言，它應垂直對齊。

數據來自API本身。

  /* container.innerText = "It's working!\\n\\n"; container.innerText += 'Found sample products:\\n'; products.forEach(product => (container.innerText += `- ${product.title}\\n`)); */ var products = [ { "imageUrl": "http://lorempixel.com/g/400/200", "title": "CANDECOR" }, { "imageUrl": "http://lorempixel.com/g/400/200", "title": "ZOLAREX" }, { "imageUrl": "http://lorempixel.com/g/400/200", "title": "HATOLOGY" }, { "imageUrl": "http://lorempixel.com/g/400/200", "title": "EGYPTO" }, { "imageUrl": "http://lorempixel.com/g/400/200", "title": "BULLZONE" }, { "imageUrl": "http://lorempixel.com/g/400/200", "title": "NIKUDA" } ]; var countFirstThree = true; var isCardSet = true; var setCount = 1; for (var i = 1; i < products.length; i++) { if (isCardSet) { $('.carousel-inner').append(insertCarouselItem(countFirstThree, setCount)); isCardSet = false; } if (i % 3 == 0) { $('#set-' + setCount).append(insertCards(products[i - 1].id, products[i - 1].imageUrl, products[i - 1].title)); $('#set-' + setCount).append('</div>'); countFirstThree = false; isCardSet = true; setCount++; } else { $('#set-' + setCount).append(insertCards(products[i - 1].id, products[i - 1].imageUrl, products[i - 1].title)); } } function getUrlImage(url) { const host = 'http://localhost:8181'; return "http://lorempixel.com/g/400/200"; } function insertCarouselItem(isActive, set) { var active = isActive ? ' active' : ''; var result = `<div id="set-${set}" class="carousel-item${active}">`; return result; } function insertCards(id, imageUrl, title) { var result = ` <div id="${id}" class="card" style="width: 300px;"> <img class="card-img-top" src="${getUrlImage(imageUrl)}"> <div class="card-body"> <h3 class="card-title">${title}</h3> <button class="btn btn-primary">Add to cart</button> </div> </div>`; return result; } 

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container-fluid"> <div id="productCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> <div class="carousel-inner"> </div> <a class="carousel-control-prev" href="#productCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#productCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 

但是我的結果是這樣的：

我想要實現的是，我希望這些卡horizontally對齊。

Answer 1

嘗試將d-flex添加到您的carousel-inner div

 p { background: red; } .carousel-item { display: block !important; float: none !important; width: auto !important; margin-right: 0 !important; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container-fluid"> <div class="carousel slide"> <div class="carousel-inner d-flex"> <div class="carousel-item"> <div id="123" class="card" style="width: 300px;"> <img class="card-img-top" src="${getUrlImage(imageUrl)}"> <div class="card-body"> <h3 class="card-title">Title</h3> <button class="btn btn-primary">Add to cart</button> </div> </div> </div> <div class="carousel-item"> <div id="321" class="card" style="width: 300px;"> <img class="card-img-top" src="${getUrlImage(imageUrl)}"> <div class="card-body"> <h3 class="card-title">Title</h3> <button class="btn btn-primary">Add to cart</button> </div> </div> </div> </div> </div> </div> 

`