本文将指导你如何优化 Bootstrap Carousel 的尺寸和响应式布局，使其在各种设备上都能呈现最佳效果，并解决内容被遮挡的问题。我们将通过CSS样式调整，确保轮播图高度适应屏幕，并保持图片比例，同时修复HTML中的错误。

解决 Bootstrap Carousel 遮挡下方内容的问题

在使用 Bootstrap Carousel 时，一个常见的问题是轮播图占据了整个窗口的高度，导致后续的 div 内容无法显示。这通常是因为轮播图的高度没有正确设置，或者图片没有适当的缩放方式。以下是一些解决此问题的步骤：

1. 使用 vh-100 设置高度

vh-100 是 Bootstrap 提供的一个实用类，它将元素的高度设置为视口高度的 100%。 你可以通过CSS直接设置 height: 100vh;。将此样式应用到轮播图的图片上，可以确保轮播图的高度始终与屏幕高度一致。

2. 使用 object-fit: cover 保持图片比例

为了防止图片在不同尺寸的屏幕上变形，可以使用 object-fit: cover 属性。这个属性会裁剪图片以适应容器，并保持图片的宽高比。

3. CSS 代码示例

将以下 CSS 代码添加到你的样式表中：

.carousel-item img {
  height: 100vh; /* vh-100 class */
  width: 100%; /* w-100 class */
  object-fit: cover; /* make image not stretch */
}

这段代码首先设置轮播图图片的高度为视口高度的 100%，宽度为 100%，然后使用 object-fit: cover 确保图片在容器内正确显示，避免拉伸或扭曲。

科威旅游管理系统

该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

下载

4. HTML 代码示例

以下是一个完整的 HTML 代码示例，展示了如何应用这些样式：

  
  
  
  
  
  

  
  

  



  
  

    

      

        

          @@##@@
          

            

              

                

                  

                    Let's Change The World With Humanity
                  
                  

                    Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet
                  
                  
                    Learn More
                    

                      
                    
                  
                
              
            
          
        
        

          @@##@@
          

            

              

                

                  

                    Let's Save More Lifes With Our Helping Hand
                  
                  

                    Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet
                  
                  
                    Learn More
                    

                      
                    
                  
                
              
            
          
        
      
      
        
        Previous
      
      
        
        Next
      
    
  
  

  

    
Test #1
  
  

    
Test #1
  
  

    
Test #1
  

5. 修复 HTML 错误

检查你的 HTML 代码，确保所有的标签都正确闭合。 在原始代码中存在一个错误：

应该改为

。

总结

通过使用 height: 100vh 和 object-fit: cover，你可以轻松地解决 Bootstrap Carousel 的尺寸和响应式布局问题，确保轮播图在各种设备上都能正确显示，并且不会遮挡下方的内容。同时，修复 HTML 中的错误也是确保代码正常运行的重要步骤。