javascript - Bootstrap 水平对齐来自 API 的数据

Question

我有一个旋转木马，在那个旋转木马中我有卡片，每张卡片应该至少水平对齐，但在我的例子中它是垂直对齐的。

数据来自 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>

但我做出的结果是这样的:

我想要实现的是，我希望卡片水平对齐。

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>

`