Bootstrap 4: cards as grid with the same height and width

前端未结

关注

 1  1734

面向向阳花 2021-01-31 11:54

I\'m trying to order cards in a grid with the same height and width. These cards will have different content with different sizes. They should also go by 3 in each row. It is OK

1条回答

执笔经年 (楼主)

2021-01-31 12:36

You can simply define the width of a card (style="width: 18rem;" in the example below) and then use the col-auto class for the columns plus the something like mb-3 (margin-bottom 3 units) for a margin at the bottom. That's it.

And if you wanted to center-align them neatly, you could add the justify-content-center to the row. Or maybe try the justify-content-between class if you like that better.

Edit:

I'm adding a second version further down below...

Here's a working code snippet:








    
        
            
                
                    Card title
                    Card subtitle
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    Card link
                    Another link
                
            
        
        
            
                
                    Card title
                    Card subtitle
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    Card link
                    Another link
                
            
        
        
            
                
                    Card title
                    Card subtitle
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    Card link
                    Another link
                
            
        
        
            
                
                    Card title
                    Card subtitle
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    Card link
                    Another link
                
            
        
        
            
                
                    Card title
                    Card subtitle
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    Card link
                    Another link
                
            
        
        
            
                
                    Card title
                    Card subtitle
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    Card link
                    Another link
                
            
        
        
            
                
                    Card title
                    Card subtitle
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    Card link
                    Another link

Second version:








    
        
            
                
                
                    Card title
                    This is a longer card 
 with 
 supporting 
 text below 
 as a natural lead-in to additional content. This content is a little bit longer.
                    Last updated 3 mins ago
                
            
            
                
                
                    Card title
                    This card has supporting text below as a natural lead-in to additional content.
                    Last updated 3 mins ago
                
            
            
                
                
                    Card title
                    This is a wider card with supporting text below as a natural lead-in to additional content. This 
 card 
 has 
 even longer 
 content 
 than 
 the first 
 to show 
 that equal height action.
                    Last updated 3 mins ago
                
            
            
                
                
                    Card title
                    This is a longer card 
 with 
 supporting 
 text below 
 as a natural lead-in to additional content. This content is a little bit longer.
                    Last updated 3 mins ago
                
            
            
                
                
                    Card title
                    This card has supporting text below as a natural lead-in to additional content.
                    Last updated 3 mins ago
                
            
            
                
                
                    Card title
                    This is a wider card with supporting text below as a natural lead-in to additional content. This 
 card 
 has 
 even longer 
 content 
 than 
 the first 
 to show 
 that equal height action.
                    Last updated 3 mins ago
                
            
            
                
                
                    Card title
                    This is a longer card 
 with 
 supporting 
 text below 
 as a natural lead-in to additional content. This content is a little bit longer.
                    Last updated 3 mins ago
                
            
            
                
                
                    Card title
                    This card has supporting text below as a natural lead-in to additional content.
                    Last updated 3 mins ago
                
            
            
                
                
                    Card title
                    This is a wider card with supporting text below as a natural lead-in to additional content. This 
 card 
 has 
 even longer 
 content 
 than 
 the first 
 to show 
 that equal height action.
                    Last updated 3 mins ago

0 讨论(0)