Вкладки меню дезориентируются при падении

Question

У меня есть панель инструментов, в которой различные меню отображаются в виде блоков, как показано на следующем рисунке:

Проблема заключается в том, что при сворачивании 4-го меню в 1-мстрока, помеченная как Трекер ввода POS , затем последние две вкладки дезориентируются, как показано ниже:

Я хочу это, когда я свернусь POS input Tracker последние два меню остаются ниже и не меняют своих позиций.

Мой код для этого:

    <!-- 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 -->

Я знаю, что проблема в том, что все вкладки меню содержатся в классе начальной загрузки class="row", поэтому, когда последняя вкладка первой строки свернута,пространство освобождается вкладками под ним, но я не могу найти решение для этого.

Любая помощь будет оценена.Благодарю.

Answer 1

Вы можете использовать nth-child в css как .right_col .col-md-3: nth-child (n + 4) {clear: both;}

Answer 2

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>

Вы можете попробовать приведенный выше код JavaScript.Этот код будет вставлять div в качестве разделителя после последнего div в строке.

Answer 3

Вам нужно немного изменить свою структуру, например

<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>

означает, что 12 столбцов должны быть в одной строке, так что вы не получите выше проблемы