如何在 Bootstrap 中设计半页轮播？

它可以使用“bootstrap.js”或“bootstrap.min.js”包含在您的网页中。 Internet Explorer 不正确支持轮播，这是因为它们使用 CSS3 过渡和动画来实现幻灯片效果。 Bootstrap Carousel是您网页的图片幻灯片，使其看起来更具吸引力。但是普通的Bootstrap Carousel如果使用的图片尺寸很大，就占据了整个网页，Bootstrap Carousel还有一个问题，当页面变大时它会放大。为了处理这种情况，在本文中，我们将设计一个仅占页面一半的 Bootstrap Carousel。

下面的例子说明了上述方法：

示例：在此示例中，我们将更改三个类 CSS 属性的值，它们是carousel-inner 、 item.active和item img 。它将固定页面轮播的高度。

  

    Bootstrap Example
    
    
    
    
    
  
    
    
    
        article { 
            margin: 15px; 
        } 
        h1 {
            color: green;
        }
        .carousel-inner {
            height: 310px;
        }
          
        .item.active {
            height: 310px!important;
        }
          
        .item img {
            object-fit: cover;
            height: 100%!important;
        }
    

  

  
    
        
          
            
            
                
                
                
            
      
            
            
                
                    
                        
                        
                    
                
                
                  
                    
                    
                        
                        
                    
                
                
                  
                    
                    
                        
                        
                    
                
            
          
            
            
                
                Previous
            
            
                
                Next
            
        
    
    
        GeekesforGeeks
        A Computer Sicence Portal for Geeks
    

  
                                

输出：