Bootstrap 3 strange behavior with accordion

Question

I have products I display on my page, 8 in total.

I currently have this set up


    
        @foreach (var item in Model)
        {
            

                    
                    
                        
                        

                        
                            @item.ProductTitle
                        
                        

                        
                        
                            NUTRITIONAL INFO 
                        
                        
                        
                            
                                FIND A STORE 
                            
                        
                        
                            
                                
                                    Content
                                
                                
                                    More Content
                                
                            
                        
                        
                    
                    

            
        }

So 12 columns across and each product takes up 4 columns. Each product has its on accordion, so when find store is clicked the according expands showing details that stock that product. As I have eight products my current layout appears like this

First row : 3 products Second row : 3 products Third row : 2 products

As shown here

enter image description here

Now when I click on Find Store on the first or Second product either on the first or second row everything gets pushed to the right so it doesn't maintain its structure as shown here, as you can see the second product or the first row has been expanded causing the layout to be muddled up.

enter image description here

But if i click on the third product either on the first or second row the layout remains in tacked...

I'm slightly puzzled in to why this would be? can someone shed some knowledge on this?

crazymatt · Accepted Answer

First off having

is redundant and can be removed. Second are all your products displayed in your 'foreach'? Because that would make your HTML structure look like this:


    ..1
    ..2
    ..3
    ...
    ..12

But what you want is this:


    ..1
    ..2
    ..3


    ..4
    ..5
    ..6

That should fix your row being mis-aligned

Bootstrap 3 strange behavior with accordion

Answers (1)

Related Questions