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

📅  最后修改于: 2021-05-25 17:44:20             🧑  作者: Mango

引导卡为我们提供了很多可以玩的功能。我们还可以使它们响应,并且大小固定也取决于我们的需求。因此,下面给出了固定大小的引导卡套的代码。我们提供的代码没有使用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代表如何有效地嵌入该卡片以使其具有响应能力。