📜  如何在 Bootstrap 中设计固定宽度的响应式卡片组?

📅  最后修改于: 2021-11-08 06:13:54             🧑  作者: Mango

Bootstrap 卡为我们提供了许多可以玩的功能。我们还可以使它们具有响应性和固定大小,这一切都取决于我们的需要。因此,下面给出了固定尺寸引导卡组的代码。我们提供的代码不使用 CSS 属性,因此看起来更简单、更容易理解。

在本文中,我们将使用一些 Bootstrap 类来设计响应式卡片。

您也可以查找有关如何创建卡片的代码,然后根据需要使用它。您可以使用卡片类 div 中给出的 img 标签修改图片。

示例 1:

HTML


  

    
    
      
    
        How to design Responsive card-deck 
        with fixed width in Bootstrap ?   
    
  
    
    

  

  
    
    
                    
            
                GeeksforGeeks             
               

                Geeks for Geeks is the best place                  to improve your computer science                  knowledge.             

                                               Click me                      
    
                                       


HTML


  

    
    
  
    
        How to design Responsive card-deck 
        with fixed width in Bootstrap ?
    
  
    
    

  

    
                    
                            
                
                                            
                        
                            Geeks for Geeks                         
                        

                            Geeks for Geeks is the best place                              to improve your computer science                             knowledge.                         

                                                                                   Click me                                              
                
            
                            
                
                                            
                        
                            Geeks for Geeks                         
                           

                            Geeks for Geeks is the best place                              to improve your computer science                             knowledge.                         

                                                           Click me                                              
                
            
                            
                
                                            
                        
                            Geeks for Geeks                         
                           

                            Geeks for Geeks is the best place                              to improve your computer science                             knowledge.                         

                                                           Click me                                              
                
            
        
    
                                  


输出:

示例 2:

HTML



  

    
    
  
    
        How to design Responsive card-deck 
        with fixed width in Bootstrap ?
    
  
    
    

  

    
                    
                            
                
                                            
                        
                            Geeks for Geeks                         
                        

                            Geeks for Geeks is the best place                              to improve your computer science                             knowledge.                         

                                                                                   Click me                                              
                
            
                            
                
                                            
                        
                            Geeks for Geeks                         
                           

                            Geeks for Geeks is the best place                              to improve your computer science                             knowledge.                         

                                                           Click me                                              
                
            
                            
                
                                            
                        
                            Geeks for Geeks                         
                           

                            Geeks for Geeks is the best place                              to improve your computer science                             knowledge.                         

                                                           Click me                                              
                
            
        
    
                                  

输出:

注意:示例 1 表示如何制作单张卡片,而示例 2 表示如何有效地嵌入该卡片以使其具有响应性。