我如何让 img-fluid 在 Bootstrap Carousel 中工作？

Question

我一直在尝试通过向它们添加 img-fluid 标签来使我的轮播中的图像具有响应性，但没有任何效果。 我试过使用.important。 我试过使用块。 我不确定是什么阻止了这种变化？ 有什么建议么？

.container{
        
        font-size: 32px;
        font-family: 'Inter', sans-serif;
        position:relative;
        top: 150px;
        right:-15px;
        font-weight: 300;
        width: 1440px;
        letter-spacing: 2px;
        
      
  }
  
 
  
  .item{
      
      
        float:right;
      
     
      
  }
  


<div class="container">
 

<div class="carousel-inner">
  <div class="item active">
    <img class="image img-fluid" src="images/image-tanya.jpg" alt="Tanya" style="height:648px; width:648px;" ><div class="carousel-caption">  
  </div>
    </div>      

  <div class="item ">
    <img class="image img-fluid" src="images/image-john.jpg" alt="John" style="height:648px; width:648px;">
  </div>

Answer 1

style="height:648px; width:648px;" 是罪魁祸首

由img-fluid class 定义的 styles 将被 styles 中的img标签上的内联 styles 覆盖。 内联 styles 始终优先于样式表中定义的那些。 尝试删除那些内联 styles 看看会发生什么:)