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

它可以使用“bootstrap.js”或“bootstrap.min.js”包含在您的网页中。 Internet Explorer 不正确支持轮播，这是因为它们使用 CSS3 过渡和动画来实现幻灯片效果。 Bootstrap Carousel是您网页的图片幻灯片，使其看起来更具吸引力。但是普通的Bootstrap Carousel如果使用的图片尺寸很大，就占据了整个网页，Bootstrap Carousel还有一个问题，当页面变大时它会放大。为了处理这种情况，在本文中，我们将设计一个仅占页面一半的 Bootstrap Carousel。
下面的例子说明了上述方法：
示例：在此示例中，我们将更改三个类 CSS 属性的值，它们是carousel-inner 、 item.active和item img 。它将固定页面轮播的高度。

html

 

    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
    

 

输出：

支持的浏览器：

• 谷歌浏览器
• 微软边缘
• 火狐
• 歌剧
• 苹果浏览器