Menu tabs are disoriented upon collapse - css

Question

My code for this is :
<!-- page content -->
<div class="right_col" role="main">
<c:if test="${not empty menuStructure.menus}">
<div class="row">
<c:forEach var="menu" items="${menuStructure.menus}"
varStatus="menuCounter">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="x_panel tile">
<div class="x_title">
<span style="font-size: 25px; color: #73879C !important; font-
weight:bold; font-size:1.0vw; margin-top:15px; font-weight:
400;">${menu.label}</span>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up">
</i></a>
</li> </ul>
<div class="clearfix"></div>
</div>
<div class="x_content" align="center" >
<a href="${menu.link}"><img
src="${contextPath}/resources/images/${menu.thumbnail}"
alt=""></a>
</div>
</div>
</div>
</c:forEach>
</div>
</c:if>
</div>
<!-- /page content -->
I know that the issue is that all menu tabs are contained in bootstrap class class="row" that's why when last tab of first row is collapsed that space is reclaimed by the tabs below it, but I'm unable to find a solution for this.
Any help will be appreciated. Thanks.

Answer 1

You need to change your structure a bit, like
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
means 12 columns should be in single row, so you wont get above issue

Answer 2

You can use nth-child in css as
.right_col .col-md-3:nth-child(n+4){
clear: both;
}

Answer 3

function alignGrid(){
$(".sp-custom").remove();
var width=$(".row").width()-30;
var temp=0;
$(".row .grid-custom").each(function(index, item) {
temp=temp+$(item).width();
if((width-temp)<$(item).width()){
$(item).after('<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 sp-custom"></div>');
temp=0;
}
});
}
alignGrid();
$( window ).resize(function() {
alignGrid();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:grey;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:green;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:lightgrey;height:40px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:yellow;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:red;height:80px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:blue;height:10px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:cyan;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:lightblue;height:70px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:black;height:70px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:brown;height:100px;">
</div>
</div>
</div>
You can try the above javascript code.
This code will insert div as a separator after the last div in a row.