传送带滑块出现问题。轮播中的卡垂直显示，而不是水平显示

Question

我正在用Django开发一个网站。我面临的问题是，当我试图在轮播中的卡片中显示产品时，卡片将垂直显示，而不是水平显示。

这是我的HTML文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="container-fluid mx-3 my-3">
  <!--Slideshow begins -->
  {% for product, range, nslides in allProds %}
  <h5 id="category_name">{{product.0.category}}</h5>
<div id="myCarousel{{forloop.counter}}" class="carousel slide my-3" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel{{forloop.counter}}" data-slide-to="0" class="active"></li>
        <!-- <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> -->
        {% for i in range %}
        <li data-target="#myCarousel{{forloop.parentloop.counter}}" data-slide-to="{{i}}"></li>
        {% endfor %}
    </ol>
    <div class="container carousel-inner row w-100 mx-auto">
        <div class="carousel-item active">
          {% for i in product %}
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
            <div class="card align-items-center mb-2" style="width: 18rem;">
              <img src="/media/{{i.image}}" class="card-img-top" alt="...">
              <div class="card-body text-center">
                <h6 class="card-title" id="namepr{{i.id}}">{{i.product_name}}</h6>
                <h6 class="card-title"><b>Price ₹: <span id="pricepr{{i.id}}">{{i.price}}</span></b></h6>
                <h6 class="card-title"><b>Stock:<span id="stockpr{{i.id}}">{{i.stock}}</span></b></h6>
                <span id="divpr{{i.id}}" class="divpr">
                  <button id="pr{{i.id}}" class="btn btn-primary cart">Add to Cart</button>
                </span>
                <!-- <a href="/shop/products/{{i.id}}"><button id="qv{{i.id}} " href="#" class="btn btn-primary cart">Quick View</button></a> -->
              </div>
            </div>
          </div>
          {% if forloop.counter|divisibleby:3 and forloop.counter > 0 and not forloop.last %}
        </div><div class="carousel-item">
          {% endif %}

          {% endfor %}
          </div>
        </div>
      </div>
    <a class="carousel-control-prev" href="#myCarousel{{forloop.counter}}" 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="#myCarousel{{forloop.counter}}" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    {% endfor %}
</div>

这些是我的CSS文件：

<style>
.col-md-3
.col-xs-3
.col-sm-3
.col-md-3
.col-lg-3
{
display: inline-block;
margin-left:-4px;

}
.col-md-3 img{
width: 125px;
height: 150px;

}
body .carousel-indicator li{
background-color: green

}
body .carousel-control-prev-icon,
body .carousel-control-next-icon{
background-color:green;
}

body .carousel-control-prev,
body .carousel-control-next{
top:auto;
bottom:auto;
}

.carousel-control-prev,
.carousel-control-next{
top:auto;
bottom:auto;
}
</style>

产品显示如下： Current result Expected Result

我尝试对html代码和css文件进行更改，但无法解决问题。请让我知道我要去哪里了。在此先感谢！