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

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

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

示例：在此示例中，我们将更改carousel-inner ， item.active和item img的三个Classs CSS属性的值。它将固定页面旋转木马的高度。

  

    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
    

  
                                

输出：