Question

我有一个仪表板，其中有不同的菜单显示为方框，如下图所示：

问题在于，当我在第一行中折叠标记为 POS输入追踪器的第四个菜单时，最后两个选项卡会迷失方向，如下所示：

我希望当我崩溃 POS输入追踪器时，最后两个菜单保持在下方并且不会改变他们的位置。

我的代码是：

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

您需要稍微改变一下结构，比如

<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列应该是单行，因此您不会遇到问题

Answer 2

你可以在css中使用nth-child .right_col .col-md-3：nth-child（n + 4）{ 明确：两者; }

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>

您可以尝试上面的javascript代码。此代码将div作为行中最后一个div之后的分隔符插入。

折叠时菜单标签会迷失方向

3 个答案: